Download - Efficient, maintainable CSS

CSSefficientmaintainable, modular

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.

<body><h2 style=“color: red;”>! Heading here</h2>

Avoid

2. Avoid using header styles as they are also hard to maintain

and increase file size.

<style>p { color: red; }

</style>

Avoid

3. Avoid using @import within the HTML as this will slow down

IE browsers.

<style>@import "a.css";

</style>

Avoid

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 {margin-top: 20px;margin-right: 10px;margin-bottom: 20px;margin-left: 10px;

}

body { margin: 20px 10px; }

Avoid

Preferred

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.

.nav ul li a { margin: 0; }

.nav a { margin: 0; }

Avoid

Preferred

10. Avoid universal selectors due to performance issues.

.nav * { margin: 0; }

Avoid

11. Avoid qualifying selectors as this is often unnecessary.

div.nav { }

.nav { }

Avoid

Preferred

12. Avoid IE-proprietary filters as they slow page performance.

filter:Alpha(Opacity=40);-ms-filter: "Alpha(Opacity=40)";

Avoid

13. Avoid IDs. Where possible, use classes instead.

#header { ... }

.header { ... }

Avoid

Preferred

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

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.

p { background: url(round-corners.png); }

p { border-radius: 10px; }

Avoid

Preferred

Russ WeakleyMax Design

Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley