Wettone.com

The Elements of CSS Style

I'm a programmer. Java and PHP are my favourite poisons. CSS is simple by comparison, right? Yes and no. CSS files can become pretty complex for large sites. How many times have you struggled to decipher something you wrote six months ago? That's why style guides are important.

This document is a work in progress. It deals mainly with formatting and doesn't touch on naming or documentation much. This is partly because CSS should be self-documenting. I'm open to feedback, though.

This is what works for me. If it doesn't work for you, let me know, and I'll add a link to your style guide. The more the merrier. There is no definitive answer to this: your personal taste will decide whether you agree with all or some of it. I have tried to explain the logic behind each rule in order to help persuade the reader of its merit.

Indenting and spacing

To improve readability, uniformly indent the content of each declaration to distinguish its properties from the surrounding selectors and braces.

selector1 {
    property1: value;
    property2: value;
}
selector2 {
    property1: value;
    property2: value;
}

Indent with tab characters rather than spaces. This will slightly reduce your file size. Every little helps. You can set your editor's tab setting to whatever indentation size you prefer.

The opening brace should be on the same line as the selector, separated by one space. The closing brace should be on a line of its own.

Each property should appear on a separate line. Use one space to separate property names and values. Where values have multiple parts, separate these by one space.

End each property declaration with a semicolon. Although this is technically unnecessary for the last declaration, it is easy to forget adding one before adding another declaration. This will help to avoid errors.

Units

Units should immediately follow the value with no spaces.

blockquote {
    margin-left: 10px;
}

You must specify a unit unless the value is zero, in which case no unit should be given. 0px is the same as 0em so units are meaningless for zero values. Write 0 on its own instead.

Case sensitivity

Write everything in lower case wherever possible. XHTML element names in selectors are case sensitive, so to avoid problems, avoid mixed case.

Ordering

Specify type selectors first, then class, then id selectors. Values lower down in CSS files override those higher up, so placing declarations in this order means you will avoid simple inheritance errors. You generally want id selectors to override type selectors anyway, so declaring them in this order makes sense.

type {
    property: value;
}
.class {
    property: value;
}
#id {
    property: value;
}

Selectors and properties should be specified in alphabetical order, except where inheritance requires that they must appear ahead of other elements (e.g. for the universal selector, and the body type). This makes everything easy to find.

Grouping

When combining selectors, put them on separate lines. This makes it easier to skim-read the text when looking for things. It also ensures that selectors are always clearly separated.

selector1,
selector2,
selector3 {
    property: value;
}

The opening brace should be on the same line as the last selector, as above.

Multiple declarations

One little-known but powerful feature of CSS is that you can have multiple declarations for the same selector. For example, this snippet:

foo {
    property1: value;
}
foo {
    property2: value;
}

is equivalent to:

foo {
    property1: value;
    property2: value;
}

This example makes the declarations longer but when combined with grouping selectors it should decrease the overall size. You will be able to use more grouping if you break declarations down into smaller chunks, because then more elements are likely to have the declarations in common.

I usually break declarations up into three groups:

  • Positioning, margins and padding
  • Colours, backgrounds and borders
  • Fonts

Then I can specify a font once and apply it to several elements, but still give them separate positions. It might look something like this:

blockquote {
    padding: 10px;
}
p {
    margin-bottom: 10px;
}
blockquote,
p {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-weight: normal;
}

It's shorter and more readable than this:

blockquote {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-weight: normal;
    padding: 10px;
}
p {
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 10px;
}

The more overlap there is, the more dramatic the difference. It's also much more flexible because there is less repetition. This makes it much faster to make changes.

Further reading

Here are some other useful sites which cover similar subjects.

I hope you found this article useful. There are more articles like this in the code section of my site.