CSS Tips

Semantics (CSS naming schemes that describe function not appearance)

When using CSS, if an appropriate XHTML tag does not exist to use as a selector, use semantic class or id attributes that have meaning of the element's contents. Adding additional information via CSS class and id is important for writing good CSS.

Thoughtful, semantically named classes and ids can help set up an (X)HTML document for future transformations and possible storage of data in XML format that can be transformed otherwise in a variety of ways. Don't name an object (id or class) for what it looks like, or where it goes in the layout.

Examples of names that are not semantic:

These names are meaningless except in the context of whoever maintains the stylesheet and then it would be high maintenance because if you wanted to change a particular style, XTML would need to be changed not just the stylesheet. CSS names that are not semantic are of limited value and very error-prone.One of the benefits of CSS over presentational markup is that it eases presentational changes. If you want some text to be yellow, ask yourself why. Naming a class or id based on its appearance misses the point, and will lead to silly-named classes.

Use CSS naming schemes that describes content not appearance, because then the appearance can change without the content changing.

Examples of names that are semantic:

These names have a level of abstraction. You can use the label over and over and only have to maintain the ONE external CSS definition. No need to recode the XHTML document with a new name when you decide to change the style. The linkage between a markup container and a stylesheet with a class or id name, can express the semantic nature of the markup's contents, giving the markup document more power, without fouling it with presentational information specific to one context. One of the most important benefits of CSS is being able to change the look without having to change the HTML. Use functional names for your classes and ids; avoid words that describe how they look.

Another thing to remember is that classes aren't always needed! If every paragraph is going to have the same style, adding a class to every paragraph element is redundant. IDs should be unique to a page. So don't reuse IDs! ID is an abbreviation for identifier. Use IDs to target specific, individual elements. Does a page have more than one heading? Not likely. Make it have an id, not a class, then style the contained blocks using inherence to avoid classitis. Classes are meant to be reused. They work great for things like alternating background colors in table rows. (Give every second row a class="AltBackground", for example.)

References:

<< previous | next >>