How to write bad CSS

[#1]

Preface: This is a geeky post about web development markup languages. If you don't understand HTML and CSS you can probably switch off now. Cascading Style Sheets (CSS) have been with us for 12 years which, in internet time, makes the technology nearly as old as the Earth itself, and yet so many people still seem to struggle with the most basic concepts. In this post I will give several examples of bad CSS along with an explanation of what is wrong in each case. Let's start with an easy one:

<p id="menu">
    <a href="something.html" class="menuLink">Something</a>
</p>

.menuLink {
    text-decoration: none;
}

What's wrong here? Well, if you put a different class on each kind of element you want to reference you get a bad case of classitis which adds unnecessary markup to your pages. In this example, you don't need the "menuLink" class because you can just use the CSS descendant selector instead:

#menu a {
    text-decoration: none;
}

How about this?

<p id="errorMessage">Something went wrong.</p>
<p id="successMessage">Yay! All good.</p>

#errorMessage {
    font-weight: bold;
    background-color: #f00;
    color: #fff;
}

#successMessage {
    font-weight: bold;
    background-color: #0f0;
    color: #fff;
}

The problem here is repetition. The messages share most of their style properties with only the background colour differing. This is what classes are for:

<p id="errorMessage" class="message">Something went wrong.</p>
<p id="successMessage" class="message">Yay! All good.</p>

.message {
    font-weight: bold;
    color: #fff;
}

#errorMessage {
    background-color: #f00;
}

#successMessage {
    background-color: #0f0;
}

This second example isn't much shorter (in fact it's a few bytes longer) but the real benefit is in legibility and maintainability. If you decide you want to make all your status messages larger you only need to do it in one place. It's also worth explicitly pointing out the difference between classes and IDs: IDs must be unique on each page and each element can have only one ID whereas classes can be applied to several elements and an element can belong to multiple classes. In the example above you can only ever have one error message on a page. If you want to be able to display several error messages at the same time, you need to use class names:

<p class="errorMessage message">Something went wrong.</p>
<p class="successMessage message">Yay! All good.</p>

.message {
    font-weight: bold;
    color: #fff;
}

.errorMessage {
    background-color: #f00;
}

.successMessage {
    background-color: #0f0;
}

This is one I see a lot and it really winds me up:

<p class="center">Welcome</p>

.center {
    text-align: center;
}

You can't use presentational words in class names! CSS is all about the separation of content & presentation. By using words like "left", "red", "large" in class names you're mixing your presentation into your content. Instead, use names that describe the purpose of the elements such as "warning", "introduction" or "important". That's it from me - what CSS mistakes have you noticed in other people's code?