When writing stylesheets, it is common for a developer new to CSS to name classes for text as .redBold, .smallText, or .bigBlueBoldItalics. These classes will wrap pieces of text to give fancy schmancy styles.
With CSS, it is best to avoid these literal names. In the case of a site redesign, text that was once .bigBlueBoldItalics may become red, normal weight, without italics, 8px in size – your styles may change and lose their meaning. This may be old news, but I still see “redText” oh-too-often.
Avoid catastrophies as red text labled “.blueItalics” by naming selectors semantically – by what they are and what the content means. Should all employee names be large, blue, and bold? Name the class .employee-name, and style it as such. Naming semantically not only improves readability to those who may have to work on your code in the future, but it also allows a site redesign to proceed with far greater ease.
The same applies to #ids. Do not name your ids #left-column or #middle-column. Instead, analyze what content the div contains. Is it the primary content of the page, the navigation? The name it as such: #primary-content, #navigation. The positioning and styling is arbitrary and should not be a permanent aspect of your naming convention.
Naming your selectors semantically future-proofs your code, allowing stylistic changes to the CSS to vastly change the look and feel of the site without ever having to touch the HTML. This is in accord with the suggestions of the W3C for good class names.
Popularity: 5% [?]
