Download - Efficient, maintainable CSS
![Page 1: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/1.jpg)
CSSefficientmaintainable, modular
![Page 2: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/2.jpg)
Here are some quick tips for creating efficient,
maintainable CSS.
![Page 3: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/3.jpg)
Applying CSS
![Page 4: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/4.jpg)
1. Avoid using inline styles as they are hard to maintain and
increase file size.
<body><h2 style=“color: red;”>! Heading here</h2>
Avoid
![Page 5: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/5.jpg)
2. Avoid using header styles as they are also hard to maintain
and increase file size.
<style>p { color: red; }
</style>
Avoid
![Page 6: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/6.jpg)
3. Avoid using @import within the HTML as this will slow down
IE browsers.
<style>@import "a.css";
</style>
Avoid
![Page 7: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/7.jpg)
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
![Page 8: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/8.jpg)
Writing CSS rules
![Page 9: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/9.jpg)
5. Use multiple declarations where possible
p{! margin: 0 0 1.5em;! background: green;}
![Page 10: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/10.jpg)
6. Use multiple selectors where possible
h1, h2, h3, h4, h5{! color: #666;! margin: 0 0 .5em;}
![Page 11: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/11.jpg)
7. Use shorthand properties where possible.
body {margin-top: 20px;margin-right: 10px;margin-bottom: 20px;margin-left: 10px;
}
body { margin: 20px 10px; }
Avoid
Preferred
![Page 12: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/12.jpg)
8. Avoid !important as it is often unnecessary.
p { margin: 0 !important; }
Avoid
![Page 13: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/13.jpg)
9. Avoid complex selectors. Try to be only as specific as
needed.
.nav ul li a { margin: 0; }
.nav a { margin: 0; }
Avoid
Preferred
![Page 14: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/14.jpg)
10. Avoid universal selectors due to performance issues.
.nav * { margin: 0; }
Avoid
![Page 15: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/15.jpg)
11. Avoid qualifying selectors as this is often unnecessary.
div.nav { }
.nav { }
Avoid
Preferred
![Page 16: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/16.jpg)
12. Avoid IE-proprietary filters as they slow page performance.
filter:Alpha(Opacity=40);-ms-filter: "Alpha(Opacity=40)";
Avoid
![Page 17: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/17.jpg)
13. Avoid IDs. Where possible, use classes instead.
#header { ... }
.header { ... }
Avoid
Preferred
![Page 18: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/18.jpg)
14. Try not to use use too many font-size declarations.
h1 { font-size: 200%; }.nav { font-size: 80%; }.widget { font-size: 70%; }.intro { font-size: 110%; }.sidebar { font-size: 85%; }
Avoid
![Page 19: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/19.jpg)
Optimisation
![Page 20: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/20.jpg)
15. Use a CSS minifier to reduce your overall CSS file
size:
http://refresh-sf.com/yui/
![Page 21: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/21.jpg)
16. Optimise images as much as possible
![Page 22: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/22.jpg)
17. Where possible, combine images into sprites.
http://designsbynickthegeek.com/tutorials/social-menu-icon-sprites
![Page 23: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/23.jpg)
18. Where possible, use CSS3 instead of images to reduce
server requests and page size.
p { background: url(round-corners.png); }
p { border-radius: 10px; }
Avoid
Preferred
![Page 24: Efficient, maintainable CSS](https://reader034.vdocuments.mx/reader034/viewer/2022050920/54c7fb814a795907498b45c2/html5/thumbnails/24.jpg)
Russ WeakleyMax Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley