CSS organisation tips

July 17, 2005 3:01 AM

Looking for useful ways to organise CSS rules. There are many different ways of structuring CSS, which ones work for you?

Douglas Bowman demonstrates a handy technique for flagging key sections in his stylesheets. Any similar tips? How do you comment and organise your styles?

posted by amestoy to computers & internet (11 comments total)

I put styles applying to tags (e.g. body { } ) at the start, followed by general-purpose classes (e.g. .error { } ). Then I group by area of the page, using descendent selectors, e.g.

#content p { ... }
#content h1 { ... }

#navigation ul { ... }
#navigation li { ... }
#navigation li.selected { ... }

By doing that I find I rarely need to add comments or worry about clashing rules.
posted by malevolent at 6:24 AM on July 17, 2005

CSS ignores white space. Indenting rules to reflect the page's hierarchy of tags can make quickly scanning through a style sheet to locate particular rules easier.
posted by normy at 7:13 AM on July 17, 2005

I'll second Malevolent's method, which is exactly what I do as well. It seems to me that adding a lot of comments and lines of dashes and whatnot, as in the link, also adds a lot of extar bytes to the file. If that works for you, fine, but just having a logical approach should make all those extra bytes unneccessary.
posted by robhuddles at 8:47 AM on July 17, 2005

Well I add comments only on occassion and it's usually when I hand the files over to a client.

ie: /*Navigation*/

But recently I have been using Bowman's flagging approach and I find it very helpful while editing and writing the CSS.

But for the most part I structure all my CSS in a similar order that makes it easier for me when I'm looking for something. Body, Link, Wrap, Header, Content, Leftbar, Rightbar, Footer, Cleaner.

So in summation define an order structure and flags. Also extremely helpful is using CSS shorthand techniques.
posted by freudianslipper at 9:51 AM on July 17, 2005

Keep in mind that in some (very-) specific cases the order of rules matters. e.g.: when assigning 2 classes to the same element, the first class definition takes precedence.
posted by signal at 10:15 AM on July 17, 2005

good note signal, definitely worth mentioning.
posted by freudianslipper at 10:55 AM on July 17, 2005

Setting the paddings and margins to zero for everything and then only adding margins or padding as needed goes a long way toward minimizing cross-browser display inconsistencies.

I usually add these styles to the top of my style sheets:

* {
margin: 0;
padding: 0;
border: 0;
}

address {
font-style:normal;
}

th,th {
vertical-align: top;
}

option {
min-width: 1.5em;
}

p,dd,ol,ul {
margin-bottom: 1em;
}

table {
margin-top: 1em;
margin-bottom: 1em;
}

ol {
margin-left: 27px;
}

ul {
margin-left: 14px;
}

Since most CSS problems are caused by Internet Explorer (assuming you're not coding for Netscape 4), I've also taken to having hack-free CSS in my main style sheet and using conditional comments to put all my IE fixes in an IE-only style sheet.

The order of rules is especially important for links; the recommended order is link, visited, hover, and active. I usually put my links at the bottom of the style sheet, with the default link styles before custom links, to control the link styles more easily.

Grouping definitions, like I did with p,dd,ol,ul in my example, helps keep the formatting consistent and the style sheet easier to maintain.
posted by kirkaracha at 12:11 PM on July 17, 2005

I like to divide styles into multiple stylesheets and make use of the overlaying feature of CSS.

To start, one core stylesheet covering generic element redefinitions -- ie., no classes and no element IDs -- such as:

* { margin: 0; padding: 0; }
body { font-family: Verdana; }
table { border-spacing: 0; border-collapse: collapse; }

Then a separate stylesheet covering site-wide settings, ie. elements generally prevalent on all pages, such as navigation.

Then again a stylesheet for individual pages or page types. For example, I might have a page containing a complex form which requires a bunch of CSS rules which only apply to that one page; thus I move these rules into a separate CSS file that is included by just that one page -- why burden the whole site with those rules?

The most frequent type of annoyance when developing CSS is misapplying the style, because you misspelled a class name or got the selector wrong, and sometimes such changes affect elements of the page that you aren't working on; scoping the CSS like this prevents "spillage" and makes the separation clean.

Stylesheet separation also helps against CSS cruft -- old rules that you didn't delete when you deleted the page elements they referred to.

Sometimes it also makes sense to have section-specific stylesheets that do all of the above; for example, if you have a section of administrative pages, instead of declaring something like <body class="adminSection">, just include a separate core stylesheet after the main core stylesheet.
posted by gentle at 1:21 PM on July 17, 2005

I generally use three CSS files for every page. The first links to a baselining stylesheet much like kirkaracha. The second applies all of the positioning, floating, margins, and padding. Back when I still gave a damn about supporting dead browsers (IE5.x, NS4.x, MacIE5.x) I often had two or three different CSS files with specific browser-based rules. I've got fewer worries these days since other requirements of the project I'm working on demand IE6/Moz/Safari2/Opera8 so I can assume decent CSS/DOM support. The third provides all of the decorative rules like fonts, colors, borders, etc. This basically allows me to build a structure and then skin it differently. Pages are named by some convention—generally baseline.css, siteSection_layout.css, and siteSection_display.css.

In-sheet organization is basic elements first, general classes second, specific id-related rules third. Each group of styles is put in alphabetical order unless this causes problems. If this happens I make judicious use of comments. Also, most of my structural CSS looks like:
element#id {
attribute:value;
}

parentElement element#id {
attribute:value;
}

parentElement * element#id {
attribute:value;
}

parentElement>*element#id {
attribute:value;
}
etc.

so I can use some combination of selections so browser support determines which rules get applied—thus avoiding unreliable javascript/UA reading tricks. These are generally commented so I know the reason behind each iteration.

Great question and good answers all!
posted by Fezboy! at 3:45 PM on July 17, 2005

Thanks all. I particularly like malevolent's technique of using descendent selectors instead of section comments, it makes each rule's specificity very clear as well as providing a grouping mechanism. Like gentle I also use page-specific sheets which again help to clarify specificity and reduce redundant styles.
posted by amestoy at 8:19 AM on July 18, 2005

Coincidentally Digital Web Magazine has just published this article which discusses CSS organisation issues. I like the recommendation to always order attributes alphabetically to avoid repeating them inadvertantly.
posted by amestoy at 1:53 AM on July 19, 2005