CSS Best practice

“Best practice” is a very loose
and often poorly defined term.

“Best practice” often comes down
to personal opinion.

“Best practice” can depend on the
team environment you are
working in.

“Best practice” may also depend
on the applications you have to
work with.

Your personal “best practices”
may change radically over time!

With that in mind, here are some
tips that may help you when
setting up CSS files in the future.

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 combine all CSS files
before final production.

Avoid

<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">

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 - especially when
you understand the cascade.

p Avoid
{
! margin: 0 !important;
}

9. Avoid complex selectors
(taxing for browsers). Try to be
only as specific as needed.

Avoid

#navigation ul li a { margin: 0; }

#navigation a { margin: 0; }

Preferred

10. Avoid universal selectors.

Avoid

.nav * { margin: 0; }

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 too many
font-size declarations.

h1 { font-size: 200%; }
Avoid
.nav { font-size: 80%; }
.widget { font-size: 70%; }
.intro { font-size: 110%; }
.sidebar { font-size: 85%; }

15. Some people like to 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.

18. If possible, use CSS3 rules
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

CSS Best practice

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (10)

Similar to CSS Best practice

Similar to CSS Best practice (20)

More from Russ Weakley

More from Russ Weakley (20)

Recently uploaded

Recently uploaded (20)

CSS Best practice