Good and Bad CSS Identifiers

Seeing a <div class="left green">...</div> block in HTML code might hurt the eyes of a lot of web designers. To identify good and bad id and class names, it is important to understand the idea of the CSS.

The World Wide Web Consortium (W3C) defines CSS2 as:

a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance.

Therefore class names left, green or largetext are theoretically good according to the first part of the CSS definition, but very very bad according to the second part, which can be illustrated with the following example. Read more »