Your SlideShare is downloading. ×
0

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

CSS Best practice

9,729

Published on

A quick presentation on some tips for writing better CSS.

A quick presentation on some tips for writing better CSS.

Published in: Education, Technology
4 Comments
19 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,729
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
357
Comments
4
Likes
19
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSSBEST PRACTICE
  • 2. Best practice
  • 3. “Best practice” is a very looseand often poorly defined term.
  • 4. “Best practice” often comes down to personal opinion.
  • 5. “Best practice” can depend on the team environment you are working in.
  • 6. “Best practice” may also dependon the applications you have to work with.
  • 7. Your personal “best practices”may change radically over time!
  • 8. With that in mind, here are some tips that may help you whensetting up CSS files in the future.
  • 9. Applying CSS
  • 10. 1. Avoid using inline styles as they are hard to maintain and increase file size. Avoid<body><h2 style=“color: red;”>! Heading here</h2>
  • 11. 2. Avoid using header styles as they are also hard to maintain and increase file size. Avoid<style> p { color: red; }</style>
  • 12. 3. Avoid using @import within the HTML as this will slow down IE browsers. Avoid<style> @import "a.css";</style>
  • 13. 4. Avoid using multiple CSS files, or combine all CSS files before final production. Avoid<link rel="stylesheet" href="reset.css"><link rel="stylesheet" href="grids.css"><link rel="stylesheet" href="text.css"><link rel="stylesheet" href="modules.css"><link rel="stylesheet" href="colors.css">
  • 14. Writing CSS rules
  • 15. 5. Use multiple declarations where possiblep{! margin: 0 0 1.5em;! background: green;}
  • 16. 6. Use multiple selectors where possibleh1, h2, h3, h4, h5{! color: #666;! margin: 0 0 .5em;}
  • 17. 7. Use shorthand properties where possiblebody{ Avoid margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px;} Preferredbody { margin: 20px 10px; }
  • 18. 8. Avoid !important as it is often unnecessary - especially when you understand the cascade.p Avoid{! margin: 0 !important;}
  • 19. 9. Avoid complex selectors (taxing for browsers). Try to be only as specific as needed. Avoid#navigation ul li a { margin: 0; }#navigation a { margin: 0; } Preferred
  • 20. 10. Avoid universal selectors. Avoid.nav * { margin: 0; }
  • 21. 11. Avoid qualifying selectors as this is often unnecessary. Avoiddiv.nav { }.nav { } Preferred
  • 22. 12. Avoid IE-proprietary filters as they slow page performance. Avoidfilter:Alpha(Opacity=40);-ms-filter: "Alpha(Opacity=40)";
  • 23. 13. Avoid IDs. Where possible use classes instead. Avoid#header { ... }.header { ... } Preferred
  • 24. 14. Try not to use too many font-size declarations.h1 { font-size: 200%; } Avoid.nav { font-size: 80%; }.widget { font-size: 70%; }.intro { font-size: 110%; }.sidebar { font-size: 85%; }
  • 25. Optimisation
  • 26. 15. Some people like to use a CSS minifier to reduce your overall CSS file size: http://refresh-sf.com/yui/
  • 27. 16. Optimise images as much as possible
  • 28. 17. Where possible, combine images into sprites.
  • 29. 18. If possible, use CSS3 rules instead of images to reduce server requests and page size. Avoidp { background: url(round-corners.png); }p { border-radius: 10px; } Preferred
  • 30. Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley

×