shauny.me

No, no, no! You’re doing it wrong!

You may want orange text, and that may be a lovely orange, but this is completely the wrong way to go about doing it. The whole point of CSS is that it should be a separate layer of styling which is added to your website, and can be interchangeable. You should be able to change the colour of that orange text some day.

To use a class name such as ‘orangetext’ you are completely missing the point. When it comes to changing that orange to perhaps a blue or green, you are going to either:

• Have something in your HTML called ‘orangetext’ that is blue, causing confusion to anyone else looking at your code (and to your future self, when you forget why you did this)
• Or you have to go through your website replacing ‘orangetext’ with something else

Neither of these outcomes are desirable.

So what should I do?

• Solution 1: Use class and id names that describe the content, not the presentation. Perhaps simply use the <em> tag, which implies an emphasis; or <strong>, which implies a strong emphasis
• Solution 2: Use HTML5 and CSS3 to completely eradicate class names. It can be done (that website has no <divs>, no classes, no ids). This not only makes your code future-proof, but also beautiful.

I have not yet got to the point where I am building websites without classes (one major hurdle is Internet Explorer support, as usual) but at the very least you should make sure your class names are representative of the content and not the presentation. A couple of examples follow:

BAD: <span class='orangetext'>     GOOD: <em>
BAD: <p class='title'>     GOOD: <h1>