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).