Immortal CSS Classnames

Naming things is famously hard.

At work I've gained some reputation for being pretty good at naming things – a go-to namer if you will. Often in the design system or front-end web guilds I'm asked what a new component/ prop/ class/ function or service should be called.

I really enjoy the process and find great satisfaction in finding identities for previously unidentifiable things. I think this satisfaction stems two fold. Firstly, naming something provides a different avenue of creativity and problem solving. But more importantly, a successful name requires deep exploration and understanding of the given thing. A component with a clear identity/ API is more likely to be used – and used correctly – than one that struggles to resonate with people.

Recently I rebuilt this website which ushered in a wave of new CSS classes. This post cherry-picks 5 of the new classnames and explains the meaning behind them. The intension is to offer a glimpse into how identities form/ document the rationale to help future me/ and potentially provide inspiration for the next time you need to rename foo or Bar.

So without further ado, lets meet the chosen classes.

1. front-matter: The front-matter class is used for the top segment of the site – beneath the header and above the fold. In a literal sense front draws on it being among the first things you see. Often this segment is called a hero on bandwidth hogging marketing sites. However since this site is primarily textual content "hero" didn't quite sit right. This steered me towards book design. In a book the front matter consists of preliminary information such as a title, colophon, and prologue. All of which exist across this site. Each page has a title. Some include publishing information (colophon). And they all start by setting context (prologue).
2. frame: The frame class is used to surround and thus draw attention to something on the page. It's most effective when used sparingly. Otherwise if everything claims importance then nothing is. Much like picture frames, you only frame a handful of pictures. The profile image on the homepage, the blog categories/ tags, article bulletins announcing news, and publishing information are all framed. The content within the frame is mounted on a frame mat (.frame__mat).
3. crop: In photography cropping removes unwanted outer areas from an image. On this site cropping removes unwanted space within a given element. An element with the crop class removes the top margin from its first child, and bottom margin from its last child. The innards of a cropped element sit flush against its bounding box.
4. cluster: The noun cluster describes things occurring closely together. Content on this website uses the owl selector * + * to distribute space evenly between flow elements. The cluster class (also an owl) reduces the space between a group of similar things.
5. flank: I wanted a word that described an element that lived within the site header and footer. Rather than couple the classname to appearance, position formed the basis for its name. The header and footer live on the outer edge of the site – the header atop and the footer below. One could say the header and footer flank each side of the main content.

Purpose over appearance #

It's very tempting to name a CSS class based on what an element looks like. However choosing names that describe purpose rather than appearance pay dividends.

Appearances changes more frequently than purpose. And differences in appearance rarely impact purpose. A Material UI versus Tailwind dropdown may look different, but both share equal functionality (allowing selection). This means classnames should tolerate and welcome visual change.

Good names stand the test of time. The frame class could well have been named square – describing its current shape. However if a future redesign favoured more rounded corners and made it oval the square class would no longer make sense. You can have oval frames but not oval squares, which would force consumers to be renamed – or worse, left with a nonsensical classname.