CSS Best practice

CSS BEST PRACTICE

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

1. “Best practice” often comes down to personal opinion .

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

3. “Best practice” can also depend on the applications you must work with.

4. 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.

Some quick tips

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>

2. Avoid using header styles as they are also hard to maintain and increase file size. <style type="text/css" media="screen"> p { color: red; } </style>

3. Avoid using @import within the HTML as this will slow down IE browsers. <style type="text/css" media="screen" > @import "a.css"; </style>

4. Avoid using multiple CSS files where possible to reduce hits to the server. @import ’header.css’; @import ’footer.css’; @import ’sidebar.css’; @import ’general.css’;

Writing CSS rules

5. Use multiple declarations where possible p { margin: 0 0 1.5em; background: green; } p { margin: 0 0 1.5em; } p { 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 { font: 80%/1.5 arial, helvetica, sans-serif; }

8. Avoid !important as it is often unnecessary - especially when you understand the cascade. p { margin: 0 !important ; }

9. Avoid complex descendant selectors . Try to be only as specific as you need. #navigation ul li a { margin: 0; } #navigation a { margin: 0; }

10. Use a consistent order for declarations within each rule so that they are easier to find.

11. Group related rules . #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... } #navigation { ... } #navigation ul { ... } #navigation li { ... }

Notation

12. Divide related rules with clear comments . /* ----------------------- header styles ----------------------- */ #header { ... } #header h1 { ... } #header h1 img { ... } #header form { ... }

13. Provide helpful information at the top of your CSS files. /* ----------------------- Site: Site name Author: Name Updated: Date and time Updated by: Name ----------------------- */

14. Include color notation at the top of your CSS file. /* ----------------------- COLORS Body: #def455 Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 ----------------------- */

Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley

http://devlog3001.blogspot.com	124
http://www.andreatavazzani.it	41
http://xtremepassion.leladystore.com	6
http://ckdesign.11.3.lms.crossknowledge.com	6
http://draft.blogger.com	4
http://ckdesign112.nightwish.epistema.local	2
http://www.onlydoo.com	1
http://ckdesign.nightwish.epistema.local	1
http://ckdesign111.nightwish.epistema.local	1

CSS Best practice

by Russ Weakley on Jul 06, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

9 Embeds 186

Statistics

CSS Best practice — Presentation Transcript