Top tips for organising your stylesheet

This entry was posted on October 28, 2007

If you take a look at my stylesheet, you will see that it is a complete mess! Aisling may like to be taken on an adventure when she’s looking through her stylesheet, but I do not! I like to be able to scroll through and find exactly what I’m looking for. I want to be able to see with a glance the padding that makes my layout mess up in Internet Explorer, or the typo that means my layout fails in Firefox.

Group your CSS rules

Grouping is good! So, have all your header rules in one place, all your link rules in another place, all your table rules together. Keep like things together, and unlike things apart.

Comment your stylesheet

/* Comments in stylesheets are enclosed with a forward slash and an asterisk. You can use comments to provide headers for each section of your stylesheet, as well as to leave notes on what each part is for, so that you (or anyone else working on your stylesheet) will know what each part does. */

Shorten your declarations

body { margin-top:0px; margin-bottom:0px; margin-right:0px; margin-left:0px;} can be shortened to body {margin:0;} - much less text, don’t you agree? Anything that has a value of 0 can have the units removed. 0 is 0 whichever way you look at it. 0px = 0em = 0% = 0.  Properties such as margin, padding, border, and font (amongst others) can all be shortened to one declaration rather than four.

Name your classes and id’s logically

CSS is used to control the aesthetics of your website, and id’s and classes should be semantic - ie, they should make sense away from your stylesheet. What happens if you later decide to change your layout? Some of your classes won’t make sense. Let’s say, for example, you currently have an id of “pink” for your header div. This could make perfect sense for your current layout because you want your header to be pink. But let’s say for your next layout you want your header to be blue. Where’s the logic in having #pink { background:blue; } in your stylesheet?

What are your top tips for organising your stylesheet? Are you a fan of shortened declarations, or do you prefer to write everything long-hand? Do you leave yourself comments, or do you automatically know which part does which job?

14 lovely people have commented

·