CHAPTER 1 Modern CSS Architecture and Front-End Development
Keep your class names relevant but neutral, sensible but portable. In-
stead of writing class names that describe the content, try to write names
that can be applied to any type of content, and that describe the visual
treatment that the class will add. Writing classes that describe content is
redundant and serves to help no one.
What is useful is knowing a class isn’t tied to a particular type of
content, and that it is abstracted enough to be reused elsewhere. Nicole
Sullivan’s media object^14 is a perfect example of this way of thinking. Class
names that don’t allude at all to the type of content are highly reusable.
To quote Nicolas Gallagher:Class names should communicate useful information to developers. [...] Tying
your class name semantics tightly to the nature of the content has already re-
duced the ability of your architecture to scale or be easily put to use by other
developers.^15Of course, some names won’t need this level of reusability; your page
header, for example, can happily take a class of .page-head. The above rules
apply mainly to abstracted design patterns that could be reused anywhere,
rather than to specific components. It’s a fine balance to strike, but one that
makes itself quite apparent.whaT’S in a naMe?
So, we’ve discussed how our classes should be written for developers, and
describe the styling’s purpose rather than the content, and how they should
be named as neutrally as possible — but how do we actually name them?14 Nicole Sullivan, “The media object saves hundreds of lines of code”
http://smashed.by/media-object, June 25, 2010
15 Nicolas Gallagher, “About HTML semantics and front-end architecture”
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/, March 15, 2012