Comments on: CSS organisation tips

Question: CSS organisation tips

amestoy — Sun, 17 Jul 2005 03:01:22 -0800

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?

By: malevolent

malevolent — Sun, 17 Jul 2005 06:24:29 -0800

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.

By: normy

normy — Sun, 17 Jul 2005 07:13:41 -0800

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.

By: robhuddles

robhuddles — Sun, 17 Jul 2005 08:47:55 -0800

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.

By: freudianslipper

freudianslipper — Sun, 17 Jul 2005 09:51:05 -0800

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.

By: signal

signal — Sun, 17 Jul 2005 10:15:46 -0800

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.

By: freudianslipper

freudianslipper — Sun, 17 Jul 2005 10:55:49 -0800

good note signal, definitely worth mentioning.

By: kirkaracha

kirkaracha — Sun, 17 Jul 2005 12:11:02 -0800

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.

By: gentle

gentle — Sun, 17 Jul 2005 13:21:55 -0800

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.

By: Fezboy!

Fezboy! — Sun, 17 Jul 2005 15:45:26 -0800

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!

By: amestoy

amestoy — Mon, 18 Jul 2005 08:19:43 -0800

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.

By: amestoy

amestoy — Tue, 19 Jul 2005 01:53:26 -0800

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.