cancel
Showing results for 
Search instead for 
Did you mean: 

How to write bad CSS

How to write bad CSS

How to write bad CSS

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?

0 Thanks
4 Comments
179 Views
4 Comments
Community Veteran
Careful, :-) do a css validation of your own sites code http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.plus.net%2Findex.html&profile=css21&usermedium=all&warning=1&lang=en
N/A
Oh I know! I didn't mean to suggest that we were above making such errors. I started writing this post for our internal forums but then decided it was worth posting publicly too. However it's important not to take validation as the only measure of good markup. None of the mistakes mentioned in this post will be picked up by a validator as they are all valid CSS and HTML. On the other hand most of the CSS errors raised by the validator on the Plusnet homepage are due to cross-browser compatibility hacks and actually improve the page rather than degrade it.
Community Veteran
Don't get me wrong, I like your blog, but there are some silly css errors on the PN site - which I first years student should be able to spot ;_0 here are just a few: .dCSCAlertBoxClose { font-weight: none; .glossline{ font-color:black; .hwtable th { padding: 5; should have a value - e.g 5px .text-small{ font-famliy:Arial,Helvetica,sans-serif; spelling of family #special-offer-ends { weidth: 297px; #content #box_products_left_hp h3 { x-system-font: none;
Oz2
N/A
QUOTE :- use names that describe the purpose of the elements such as “warning”, “introduction” or “important”. Er i hate to say this but important is a CSS user rule override, so er well best not to use it as one of your class names as you suggest! And yep my CSS is atrocious and it's good to point out a few lazy bones errors so that the mistakes ain't made over and over (i am sure i am guilty). Any how i think your post is a great idea but i thought peeps should know! Ref: - http://www.irt.org/script/5408.htm Regards Mr Oz.