Planning your stylesheet - the definitive guide http://www.webcredible.co.uk/user-friendly-resources/css/planning-sty...

User experience research & design

March 2008

Planning your stylesheet - the definitive guide

The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your
stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but
the following are best practice...

Comment your stylesheet

Commenting your stylesheet makes it much easier to find the information or the commands you're looking for.

Meaningful comments include:

Last updated - This information can quickly let developers know about recent changes made to the file:

References - Comments can also be used as a quick reference for the main style guides applied throughout
the site:

Organisation - Use comments to identify the different sections of the stylesheet:

Reminders and notes - Leaving reminders and notes for yourself and other developers can help avoid
confusion later:

Define general rules and main classes at the top of the stylesheet

Set the styles of generic HTML elements, for example:

1 de 4 1/9/2008 14:15
Planning your stylesheet - the definitive guide http://www.webcredible.co.uk/user-friendly-resources/css/planning-sty...

Then, list the classes that will be most commonly used across the site, for example:

Order the CSS in the same order as the HTML

The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be
large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to
locate how an element is being styled.

Know when to use elements, ids and classes

Using the correct selector type means your CSS file can be significantly reduced in size:

1. Elements - Elements such as body, ( ), paragraphs, ( ) and headings, ( , etc.) should

be used to define general rules

2. Ids - These are unique identifiers and should only be used once within a document. Ids should be used to
style major structural sections of a web page such as the header or the footer.

3. Classes - These can be used on any type of HTML element.

Too many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as
possible by referencing elements and/or ids by nesting the selectors.

Imagine the following HTML code:

Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:

2 de 4 1/9/2008 14:15
Planning your stylesheet - the definitive guide http://www.webcredible.co.uk/user-friendly-resources/css/planning-sty...

Name classes and ids logically

Don't name classes and ids based on their color or position as these may change in time. Try and give them a
name that's likely to remain relevant over time. Also, use hyphens ahead of underscores as certain old browsers
have a hard time understanding the latter.

Use a common naming system for your classes and ids. It will save a lot of time and confusion when developing,
debugging and updating documents.

Nest CSS selectors

By nesting CSS selectors (i.e. using more than one CSS selector in one command) we can apply styles by
navigating the HTML document tree. For example, to apply a colour of red to all paragraphs within a div, we can
use the following rule:

Take advantage of inheritance

Some CSS commands inherit from their parents whereas others don't. The use of nesting means you don't have to
declare the same properties over and over again.

Generally speaking, text-related CSS commands (e.g. , ) are inherited by descendant elements,
whereas layout-related commands (e.g. , ) aren't inherited .

Group selectors with common CSS declarations

You can avoid specifying the same set of properties several times by grouping the selectors that share the same
CSS declarations together. For example:

This article was written by Brigitte Simard. Brigitte's crazy about accessibility and CSS - so crazy that she works for
Webcredible, an industry leading user experience consultancy2, helping to make the Internet a better place for
everyone. She spends much of her time working on the world's most accessible CMS3 and is very good at CSS
training4 .

What next?

Read more CSS articles5 on this website

Get a highly accessible CSS website through our accessible CSS web design6 expertise
Get our accessible and usable CMS3 so your site offers outstanding accessibility
Attend our interactive intermediate CSS training4 and advanced CSS training7 courses

Republish our CSS articles

3 de 4 1/9/2008 14:15
Planning your stylesheet - the definitive guide http://www.webcredible.co.uk/user-friendly-resources/css/planning-sty...

All our CSS articles are available for republishing, provided the author bio and links in the bio remain intact. You
8
can also use our RSS news feed to republish all of our CSS articles.

Links

1. http://www.webcredible.co.uk/jobs/usability.shtml

2. http://www.webcredible.co.uk/

3. http://www.webcredible.co.uk/services/accessible-cms.shtml

4. http://www.webcredible.co.uk/services/css-training-fund.shtml

5. http://www.webcredible.co.uk/user-friendly-resources/css/

6. http://www.webcredible.co.uk/services/web-design.shtml

7. http://www.webcredible.co.uk/services/css-training.shtml

8. http://www.webcredible.co.uk/user-friendly-resources/css.rss

9. http://del.icio.us/post?url=http://www.webcredible.co.uk/user-friendly-resources/css/planning-
stylesheet.shtml&title=Planning%20your%20stylesheet%20-%20the%20definitive%20guide

10. http://digg.com/submit?phase=3&url=http://www.webcredible.co.uk/user-friendly-resources/css/planning-
stylesheet.shtml

11. http://reddit.com/submit?url=http://www.webcredible.co.uk/user-friendly-resources/css/planning-
stylesheet.shtml&title=Planning%20your%20stylesheet%20-%20the%20definitive%20guide

12. http://slashdot.org/bookmark.pl?url=http://www.webcredible.co.uk/user-friendly-resources/css/planning-
stylesheet.shtml&title=Planning%20your%20stylesheet%20-%20the%20definitive%20guide

13. http://www.stumbleupon.com/submit?url=http://www.webcredible.co.uk/user-friendly-resources
/css/planning-stylesheet.shtml&title=Planning%20your%20stylesheet%20-%20the%20definitive%20guide

14. http://www.technorati.com/faves?add=http://www.webcredible.co.uk/user-friendly-resources/css/planning-
stylesheet.shtml

15. http://myweb2.search.yahoo.com/myresults
/bookmarklet?t=Planning%20your%20stylesheet%20-%20the%20definitive%20guide&u=http:
//www.webcredible.co.uk/user-friendly-resources/css/planning-stylesheet.shtml

16. http://www.webcredible.co.uk/user-friendly-resources/tellfriend.shtml?urlis=http://www.webcredible.co.uk
/user-friendly-resources/css/planning-stylesheet.shtml&
titleis=Planning%20your%20stylesheet%20-%20the%20definitive%20guide

Webcredible, 99 Mansell Street, London, E1 8AX, UK

www.webcredible.co.uk
tel 0870 242 6095 fax 020 7481 2569 e-mail info@webcredible.co.uk

4 de 4 1/9/2008 14:15