Beautify your CSS

18 December 2010

I’ve thought and read a bit about finding the best structure to format and organise your css to make easily legible and maintainable. Really, this only makes a difference in development code, as all my production code is minified, cause every kb counts!

Sectional CSS

In thinking about this, i really want to also make sure there is very little duplication of code and keep the idea of a cascading (hierarchical) style sheet. So i separate CSS into 5 sections:

  • Style reset/overides
  • HTML elements
  • Page Layout
  • Generic classes
  • Module styles

Style reset/overides

I use a modified version of the YAHOO style reset.

HTML Elements

Here is where i put all the styling for basic HTML elements. ie body, h1, h2, h3, ul, li etc.

Page Layout

Regardless what content is on the page, these styles will ensure that content sits in the area it should be. At this level in the stylesheet, if there is an error, or you don’t write the rest, the document should look ok, if not boring as all hell!

Generic classes

I add classes which i refer to as generic, which are inherited in other modules and can be overridden at a more specific level.

Module styles

At Yahoo, we build everything in a modular way, so each module’s styes would be placed in this area. Broken into two sub-sections: generic module styles (inherited by other modules) and then module specific styles (bound to “individual” modules).

Why?

If you have structured html and css (keeping a module structure and classes similar) it will allow inheritance and more consistent display with less css. Also styles are inherited in a logical way, and if you comment your code before each modules styles, your code will be somewhat beautiful and functional.

Selectors and Styles

This is really the reason i wrote this article, for this section. My method has it’s pros and cons, and comes under a fair bit of scrutiny, but i think it still stands up against all it’s detractors. So here it is:

.module { border-top:2px solid #ccc}
.module .heading h2 { color:#333; font-size:131%; line-height:1.321}
.module .body { padding:10px; margin-bottom:10px; border-bottom:3px solid #ccc;}
.module .body h3 { color:#333; font-size:116%; line-height:1.321}
.module .body h3,
.module .body p { margin:5px 0 0;}

Basic rules as you can probably see from the above example, are:

  • One selector set per line, separated by comma and line break for multiple selectors
  • Curly Brackets/Parens start and end on the same line
  • Styles sit as a colon separated list within the parens

Why?

Keeps the code legible and makes the hierarchy and inheritance obvious. It’s quickly obvious and understandable without scrolling overly. It’s easy to debug once you cross reference it with the HTML.

Other methods:

Matt Sain

Ramblings of a developer, designer and child subscribe

This blog is a public GitHub repository. If you find an error I will not be surprised... but if you fork and edit the blog and send me a pull request you'd be pretty awesome in my book.

Featured Repos