Andrea's Blogger Templates

When naming your IDs and classes, it is important that you keep the names as “unpresentational” as possible. For instance, if you want all of your form notification messages to be red, you could give them a class of red. This is fine as long as there are no other red elements on the page. However, say you wanted to style required form labels red as well. You are now forced to guess to which element that class could refer, and things are already starting to get confusing. Imagine how confusing the code could become if you used presentational elements across the whole site? This gets even more complicated if you decide to change the presentation of your form notifications from red to yellow. Now, you either have to go back and change all your class names, or you have an element called red that looks yellow.

Instead, it makes sense to name your elements based on what they are rather than how they look. That way your code will have more meaning and never go out of sync with your designs. So in the previous example, rather than giving your notifications a class of red, you should give them a more meaningful name like .warning or .notification (see Figure below). The great thing about meaningful class names is that you can reuse them across your site. For instance, you could also use the class of .notification on other types of messages, and style them completely differently based on where they are in the document.