Choosing and using CSS classes and IDs to control XHTML presentation

Too many classes and IDs can lead to the same bloat that plagues inline styling and presentation markup

CSS is the blessing that is saving HTML/XHTML and all other similar mark-up languages from the mess that was caused by the mixing of markup and styling. Many a front-end designer/developer often over-define their markup in fear of not being able to properly target and style certain sections and elements of their content. For instance, one may want to separately control titles, subtitles, images, lists, list titles, list items etc, and one way to do this is to attempt to anticipate all the granular sub-elements of a given block and enclose them in elements that belong to classes, or IDs for more precise targeting.

Motivated by the above fear, one can easily end up with code as shown below:

<div id="mypage">
<div id="mypagetitle" class="title">Controlling your XHTML using CSS</div>
<ul id="list_of_points">
<li id="item_1">Follow the guidelines on cmsproducer.com</li>
<li id="item_2">Pay attention to specificity</li>
<li id="item_3">Bear the cascade priority in mind</li>
<li id="item_4">Avoid unnecessarily using !important in your CSS</li>
</ul>
</div>

Although the intentions of this are to markup the content is a comprehensive manner so that ones can control the presentation with pin-point accuracy without ever having to go back to the markup (this is crucial in CMS setups where the front-end developer does not necessarily have access or knowledge of how to modify backend code), the markup is bloated with unused classes and IDs. If all these classes and IDs were to be put to use, it would result in a very large CSS file that basically transfers the bloat and enormity from inline CSS and FONT tags, to the CSS definition file. This defeats the purpose of being able to group like pieces of markup so as to control them and make them look similar while maintaining the ability to apply unique styles when necessary. In the above example is a manifestation of too many IDs being used thereby overly fragmenting the presentation. Using too many different classes also results in a situation where each class has one or a few members, thereby mimicking the use of IDs, with the difference that classes can appear more than one on any given page.

Each of these situations result in a CSS file such as this:

#item_1, #item_2, #item_3, #item_4 { color: #ff0000; font-weight: 600; }

A better approach to this would have been to either use a class, or take advantage of the shared specificity of all the bullets to target them as follows:

#mypage ul li { color: #ff0000; font-weight: 600; }

div#mypage ul li { color: #ff0000; font-weight: 600; }

With the second example having a higher specificity and thereby presenting a CSS feature that makes it possible to mark-up once, and control the presentation using several CSS files that override each other based on specificity.

Depending on the content structure, one can choose to use or ignore specificity to override other declarations without resorting to !important and inline CSS.

The balanced and sustainable approach to controlling the presentation of your markup is to balance the use of IDs and classes, and use them sparingly. If the content structure is well thought out, one can come-up with a markup approach that uses IDs to identify sections of content; classes to group similar pieces of content within an ID and across the page/content, and elements as a preexisting structural framework that can be targeted without having to attach to a class or ID.

Add new comment