The W3C spec on the class attribute says There are no additional restrictions on

Question

The W3C spec on the class attribute says

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

Reference

I work on a massive website that has many disparate pages. We have a default stylesheet that is shared across practically all pages. I find it useful to have CSS rulesets such as these:

.center { text-align: center; }
.red { color: red; }
However, these classes do not semantically describe content.

I'm sure you can understand that there are an enumerable number of cases where I need to center text or color it red, and each of these specific instances may have nothing to do with one another. For example, the class warning may be useful in one spot, but in another it may just be aside. I wouldn't necessarily want all warnings to be red either.

I realize that this is a hyper-technical question, but I do want the hyper-technical answer. Is there any correct way to reconcile having general style rules that express no semantics with the HTML spec? Is this a case for shudder inline styles?

Explanation / Answer

I work on a massive website that has many disparate pages. We have a default stylesheet that is shared across practically all pages. I find it useful to have CSS rulesets such as these:

.center { text-align: center; }
.red { color: red; }
This is commonly done, but in my opinion it is a very poor practice. It's only a teeny tiny bit better than just putting all the styles inline. The only advantage you get is that you can choose a different shade of red. It's so antithetical to the idea of CSS that it would be a candidate for thedailywtf.com, if only it weren't such a common practice.

Instead of

<div class="warning">Do not cross the streams!</div>
You have

<div class="warning red center">...</div>
and elsewhere:

<span class="red">...</span>

<div class="center">Some heading or caption or whatever</div>
<div class="warning bold black">A different kind of warning?</div>
What are you going to do when your client wants to change all the warnings to black text in a yellow filled box with a black border, floated right? A task that should take ten minutes instead takes ten hours.

Sure, it's more work now to assign semantic class names to all your content, but doing so makes it very easy to adjust the look of the site in the future. The bigger the web site, the more important it is to do this properly. If you are familiar with word-processing applications, think about adjusting the subsection headings in a 50-chapter book where no paragraph styles were used.

If you want some "warnings" red, and other "warnings" not red, then you need two separate classes, e.g. "warning" and "serious-warning".

I recommend Transcending CSS: The Fine Art of Web Design by Andy Clarke, Molly E. Holzschlag, Aaron Gustafson and Mark Boulton. It's a beautiful book, and does a great job of explaining how and why to separate the semantic content from the presentation.

Related Questions

Navigate

• Browse (All)
• Browse T
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.