What’s the best way of structuring CSS for projects? I guess that’s down to personal opinion, but I’m moving towards placing my CSS into more of a layered structure.

I find that for big projects, mainly that of web applications, splitting up your CSS into more manageable chunks can make life far easier.

How do you split the files though? Well, for the most part I tend to look at a website as a combination of layers, where each layer represents a specific component of the interface make up.

Currently I identify three main layers;

  1. Structure
    This includes all of the CSS properties that make up the structural layout of the site. Properties such as position, height, width, margin, padding.
  2. Text
    This includes all of the CSS properties that control anything text related on a page. Any font related properties, line heights, text aligns.
  3. Color/Theme
    This includes all of the CSS properties that relate to color and imagery within the site. Properties such as color, background, border, list.

Each layer has its own stylesheet, ‘structure.css’, ‘text.css’ and ‘theme.css’. The theme CSS file would usually be given the theme name. Each separate CSS layer is then imported into the ‘global.css’ file using an @import for each. Finally the ‘global.css’ is linked to the XHTML page.

So how do style declarations fit into this structure? Consider this example below;

Structure

h1 {
position: relative;
height: 20px;
width: 150px;
margin: 2px 0 15px 0;
}

Text

h1 {
font-family: Tahoma, Verdana, Arial, sans-serif;
font-size: 18px;
}

Color/Theme

h1 {
color: #000;
background-image: url(h1Back.gif);
}

So the h1 style declaration is spanned over the three files, but the properties set in ‘structure.css’ relate only to structure, ‘text.css’ to text and ‘theme.css’ to color and theme settings.

Spanning, Are You Crazy?

Yes, thats right, spanned over multiple files. I know most of you are thinking that I’m crazy right now. Think about it a little though, the benefits of developing in this fashion start to become clearer.

Debugging becomes a breeze as you can identify which stylesheet the problem is occuring in by simply switching off stylesheets one by one. If you see an obvious problem with the width or height of an element in a certain browser then you know straight away that you need to make a fix in the structural layer.

You also avoid the ‘one huge stylesheet’ problem by breaking things down. Stylesheets tend to become large and overwhelming, by adopting this method you are keeping things in small chunks and structuring your code so it is both easy to follow, maintain and reuse.

Great for Teamwork

I’ve also found this method of CSS development great for teamwork. You may have a particular designer who is excellent with palettes and color scheming but isn’t too technically inclined. You can allow them only to edit the ‘theme.css’ which would hide all of the structural and textual styles from them, thus preventing them from being overwhelmed by code and potentially breaking something.

The same works for coders. If they want to make an edit to the structure of the site, then they can avoid any design related CSS and head straight for the structural layer.

I’ve said enough. What are your opinions on this method? I’m interested in hearing how you have introduced some sort of structure into your CSS development.