CSS Best practice
Report
Russ WeakleyFollow
Jul. 6, 2010•0 likes•7,040 views
25 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
CSS Best practice
Jul. 6, 2010•0 likes•7,040 views
25 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Education
Technology
A quick presentation on some tips for writing better CSS.
Russ WeakleyFollow
CSS Best practice
- CSS BEST 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. 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">
- 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 { 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 filters 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%; }
- 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. 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