tantek.com

Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes

on (ttk.me b/4MY1) using BBEdit

Search the web for "CSS classes" and you'll find numerous well intentioned references which are imprecise at best, and misleading or incorrect at worst. There are no such things as "CSS classes". Here's why you should refer to HTML classes, CSS class selectors, or even CSS pseudo-classes, but not "CSS classes".

Terminology Summary Table

Wondering what to call "classes" and don't care why? Here's a handy table of examples and terms.

the thing what to call it
class="h-card vcard" class attribute, HTML class attribute
h-card vcard classes, class names, HTML classes / class names, or class attribute value
h-card class, class name, or HTML class (name)
.h-card class selector, or CSS class selector
:active pseudo-class, pseudo-class selector, or CSS pseudo-class (selector) - except for :first-letter, :first-line, :before, :after
::first-letter pseudo-element, pseudo-element selector, or CSS pseudo-element (selector)

Why "CSS classes" is imprecise or incorrect

There's no such thing as a CSS "class". Optimistically what may be happening is that people who say "CSS class" are using it as an imprecise shorthand for "CSS class selector". However, in articles / conversation I've seen / heard that's not the case. They're incorrectly referring to the "class" itself, just the class name, e.g. "h-card" in the above table/examples.

Both "h-card" and "vcard" are just "classes" or "class names" (as well as being root class names for the h-card / hCard microformats). If you need to be explicit that you're talking about web technologies, prefix the phrases with "HTML", e.g. "HTML class(es)" or "HTML class name(s)".

Why saying "CSS classes" is bad practice

This isn't just pedanticism. By using the phrases "CSS class(es)" or "CSS class name(s)" you're not only being imprecise (or just plain wrong), you're tying the presentational context/framing of "CSS" to class names which implies and even encourages the bad practice of using presentational class names.

Why saying "HTML classes" is good practice

In conversations, discussions, and especially when teaching workshops, it's better to be consistent about calling them "HTML class(es)" because that more accurately refers to their effects on structure and semantics. It's upon that structure and those semantics that we can then write whatever CSS rules we need to achieve the design of the day/week/month (which inevitable gets changed/tweaked far more often than the underlying markup / classes).

Hat-tip to Jonathan Neal, who asked about a "css naming convention guide" in a certain Freenode CSS related IRC channel, to which I answered text similar to the above and then decided I should blog it for reference. Oh, about class naming conventions: a big part of where microformats came from was the desire to come up with naming conventions for common components/chunks/modules in pages like people, organizations, events, reviews, etc. Want to explore more such class naming conventions? Join us in IRC: Freenode: #microformats, or if you're in the San Francisco Bay Area, come by the microformats meetup & drinkup tonight (Facebook, Google+, Plancast).