Efficient, maintainable CSS

efﬁcient
maintainable, modular

CSS

Here are some quick tips for
creating efficient,
maintainable CSS.

1. Avoid using inline styles as
they are hard to maintain and
increase ﬁle size.

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

2. Avoid using header styles as
they are also hard to maintain
and increase ﬁle 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
ﬁles, or use a script to combine
all CSS ﬁles 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

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 speciﬁc 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 ﬁlters
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%; }

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

Efficient, maintainable CSS

More Related Content

What's hot

Similar to Efficient, maintainable CSS

More from Russ Weakley

Recently uploaded

Efficient, maintainable CSS