Your SlideShare is downloading. ×
0
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Efficient, maintainable CSS
Upcoming SlideShare
Loading in...5
×

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

Efficient, maintainable CSS

48,371

Published on

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.

Published in: Technology, Education
13 Comments
215 Likes
Statistics
Notes
No Downloads
Views
Total Views
48,371
On Slideshare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
2,059
Comments
13
Likes
215
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. efficientmaintainable, modularCSS
  • 2. Here are some quick tips for creating efficient, maintainable CSS.
  • 3. Applying CSS
  • 4. 1. Avoid using inline styles as they are hard to maintain and increase file size. Avoid<body><h2 style=“color: red;”>! Heading here</h2>
  • 5. 2. Avoid using header styles as they are also hard to maintain and increase file size. Avoid<style> p { color: red; }</style>
  • 6. 3. Avoid using @import withinthe HTML as this will slow down IE browsers. Avoid<style> @import "a.css";</style>
  • 7. 4. Avoid using multiple CSS files, or use a script to combine all CSS files into one.<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"> Avoid
  • 8. Writing CSS rules
  • 9. 5. Use multiple declarations where possiblep{! margin: 0 0 1.5em;! background: green;}
  • 10. 6. Use multiple selectors where possibleh1, h2, h3, h4, h5{! color: #666;! margin: 0 0 .5em;}
  • 11. 7. Use shorthand properties where possible.body Avoid{ margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px;} Preferredbody { margin: 20px 10px; }
  • 12. 8. Avoid !important as it is often unnecessary.p { margin: 0 !important; } Avoid
  • 13. 9. Avoid complex selectors. Try to be only as specific as needed. Avoid.nav ul li a { margin: 0; }.nav a { margin: 0; } Preferred
  • 14. 10. Avoid universal selectors due to performance issues..nav * { margin: 0; } Avoid
  • 15. 11. Avoid qualifying selectors as this is often unnecessary. Avoiddiv.nav { }.nav { } Preferred
  • 16. 12. Avoid IE-proprietary filters as they slow page performance. Avoidfilter:Alpha(Opacity=40);-ms-filter: "Alpha(Opacity=40)";
  • 17. 13. Avoid IDs. Where possible, use classes instead. Avoid#header { ... }.header { ... } Preferred
  • 18. 14. Try not to use use too many font-size declarations.h1 { font-size: 200%; }.nav { font-size: 80%; } Avoid.widget { font-size: 70%; }.intro { font-size: 110%; }.sidebar { font-size: 85%; }
  • 19. Optimisation
  • 20. 15. Use a CSS minifier toreduce your overall CSS file size: http://refresh-sf.com/yui/
  • 21. 16. Optimise images as much as possible
  • 22. 17. Where possible, combine images into sprites. http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
  • 23. 18. Where possible, use CSS3 instead of images to reduce server requests and page size. Avoidp { background: url(round-corners.png); }p { border-radius: 10px; } Preferred
  • 24. Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley

×