Modular CSS? Some thoughts (1)

While rebuilding a family of websites in different languages a couple of years ago, I formulated some guidelines to follow while writing CSS code and assigning classes and IDs to HTML elements. For various reasons, back then, we decided against using CSS precompilers, mainly as it seemed to be easier to ensure cross-browser compatibility by hand-coding the CSS. These guidelines turned out to be very helpful in creating modular and optimised stylesheets where one had to repeat as little as possible, and didn't need to worry about specificity issues. With the wider and wider implementation of CSS3, I'm sure some of these guidelines will soon look outdated (I had to support IE6!), but I hope the rest will help someone out there.

Use as few IDs as possible. IDs should be unique on a page, so if you use an ID to mark, say, a counter to be updated every second, or an element with some special styling, and then this needs to be duplicated, you'll need to rewrite the HTML, the styling, and perhaps some JS. A good usage of IDs I found is the following:

Reserve IDs for areas on the page like #content, #sidebar, etc., which, because of the structure of the page, cannot and will not be repeated. This can also help to avoid CSS specificity issues: for example, a rule relating to one area on the page (e.g. "#sidebar a") will always take precedence over some general formatting (".widget strong a").

Consistent naming. Agree on the case and punctuation allowed in ID names and class names. Regardless of what is legal according to the standard, my favourite choice is all lowercase and underscores as separators, which helps to keep the CSS file clean, and it is easy to remember how something is written.

Use "subclasses" to mark types of things. By "subclass," I mean a CSS class name that has more than one part, with the parts separated by underscores in a "parentclass_subtype" format. (It is useful to use underscores only in subclasses.) Subclasses should be used in addition to the parent class. For example, if there are multiple buttons on the page, all marked with the .button class, but there is one green, then it should have 'class="button button_green"'. This is a possible way of avoiding multi-class CSS selectors like "DIV.button.green" some browsers don't support, as one can use "DIV.button" to style buttons in general, and "DIV.button_green" to style the special ones.

Use subclasses, if necessary, to mark things inside things. Although it should not be necessary to do so in general, I found it useful to use a similar naming convention for classes on elements inside other marked elements. For example, if there is a DIV.widget, and it has two parts, a header and a body, one could use

<div class="widget">
  <div class="widget_head"> ... </div>
  <div class="widget_body"> ... </div>
</div>

if one suspects that using class="head" only would clash with some general styling. Maybe it's a good idea to leave out the underscores in these cases (to separate these from real subclasses). And one can abbreviate the class names as well:

<div class="widget">
  <div class="widgeth"> ... </div>
  <div class="widgetb"> ... </div>
</div>

Use short class names on elements repeated many times. We don't want to type a lot, and if the HTML is generated in a loop, we don't want to inflate it either.

Click here for part 2