View
123
Download
0
Category
Tags:
Preview:
DESCRIPTION
A quick presentation on some tips for writing better CSS.
Citation preview
CSSBEST PRACTICE
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.
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 combine all CSS files
before final production.
<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 - especially when you understand the cascade.
p{! margin: 0 !important;}
Avoid
9. Avoid complex selectors (taxing for browsers). Try to be
only as specific as needed.
#navigation ul li a { margin: 0; }
#navigation a { margin: 0; }
Avoid
Preferred
10. Avoid universal selectors.
.nav * { margin: 0; }
Avoid
11. Avoid qualifying selectors as this is often unnecessary.
div.nav { }
.nav { }
Avoid
Preferred
12. Avoid IE-proprietary filtersas 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 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. 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.
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
Recommended