Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
SlideShare a Scribd company logo

Efficient, maintainable CSS

•
•
Russ Weakley
Russ Weakley

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.

Related slideshows

9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes9- Learn CSS Fundamentals / Pseudo-classes
9- Learn CSS Fundamentals / Pseudo-classes
 
Learn BEM: CSS Naming Convention
Learn BEM: CSS Naming ConventionLearn BEM: CSS Naming Convention
Learn BEM: CSS Naming Convention
 
CSS
CSSCSS
CSS
 
1 of 24
Download to read offline
efficient maintainable, modular CSS
Here are some quick tips for creating efficient, maintainable CSS.
Applying CSS
1. Avoid using inline styles as they are hard to maintain and increase file size. Avoid <body> <h2 style=“color: red;”> ! Heading here </h2>
2. Avoid using header styles as they are also hard to maintain and increase file size. Avoid <style> p { color: red; } </style>
3. Avoid using @import within the HTML as this will slow down IE browsers. Avoid <style> @import "a.css"; </style>
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
Writing CSS rules
5. Use multiple declarations where possible p { ! margin: 0 0 1.5em; ! background: green; }
6. Use multiple selectors where possible h1, h2, h3, h4, h5 { ! color: #666; ! margin: 0 0 .5em; }
7. Use shorthand properties where possible. body Avoid { margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; } Preferred body { margin: 20px 10px; }
8. Avoid !important as it is often unnecessary. p { margin: 0 !important; } Avoid
9. Avoid complex selectors. Try to be only as specific as needed. Avoid .nav ul li a { margin: 0; } .nav a { margin: 0; } Preferred
10. Avoid universal selectors due to performance issues. .nav * { margin: 0; } Avoid
11. Avoid qualifying selectors as this is often unnecessary. Avoid div.nav { } .nav { } Preferred
12. Avoid IE-proprietary filters as they slow page performance. Avoid filter:Alpha(Opacity=40); -ms-filter: "Alpha(Opacity=40)";
13. Avoid IDs. Where possible, use classes instead. Avoid #header { ... } .header { ... } Preferred
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%; }
Optimisation
15. Use a CSS minifier to reduce your overall CSS file size: http://refresh-sf.com/yui/
16. Optimise images as much as possible
17. Where possible, combine images into sprites. http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
18. Where possible, use CSS3 instead of images to reduce server requests and page size. Avoid p { background: url(round-corners.png); } p { border-radius: 10px; } Preferred
Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

More Related Content

Efficient, maintainable CSS

  • 2. Here are some quick tips for creating efficient, maintainable 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 within the 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
  • 9. 5. Use multiple declarations where possible p { ! margin: 0 0 1.5em; ! background: green; }
  • 10. 6. Use multiple selectors where possible h1, 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; } Preferred body { 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. Avoid div.nav { } .nav { } Preferred
  • 16. 12. Avoid IE-proprietary filters as they slow page performance. Avoid filter: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%; }
  • 20. 15. Use a CSS minifier to reduce 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. Avoid p { background: url(round-corners.png); } p { border-radius: 10px; } Preferred
  • 24. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley