Trying the SUIT CSS Naming Convention

I’m in the process of redeveloping this site. The site will still use WordPress but I’ll be adding a custom skin.

I’ve been wanting to try Pattern Lab for a while, so the first step is to create a pattern library. It’s early days, today’s task it to set up a reset and base styles.

Additionally, I’ll be sampling a CSS naming convention I’ve been meaning to try for a little while. A personal project is the perfect opportunity.

BEM Naming Convention

I’ve been using the BEM class naming convention for some time. BEM class names boil down to:

.component-name {}
.component-name--modifier-name {}
.component-name__descendant-name {}

The BEM naming convention uses meaningful double hyphens to indicate a component modifier, and double underscores to indicate a component descendant. Components, modifiers and descendants names are separated by hyphens.

SUIT CSS Naming Convention

For the redevelopment of my site, I’ve decided to try a variation of the SUIT CSS naming convention. I’ve been interested in the SUIT naming convention since seeing Nicolas Gallagher’s talk at CSSconf Australia (from 20 minutes). I’m varying from the default convention to use:

.u-utility {}
.t-templateName {}

.ComponentName {}
.ComponentName-modifierName {}
.ComponentName_descendantName {}

.ComponentName.is-someState {}
.js-ComponentName /* JavaScript hook */

I’m switching the indicators for modifiers (from double to single hyphen) and descendants (from single hyphen to underscore) as I like the visual clue the underscore provides to indicate descendants.

I’m adding the template name classes in as they’re an important part of WordPress. I rarely use them and filter them to a much reduced set, but it’s nice to have them there should I need to target some WordPress generated HTML.

The Pascal case class names will ensure I don’t hit any WordPress generated classes, in the rare case I don’t filter it to use my preferred code. This is a reason to try it out, but mainly it’s because I’m curious too see how it affects my work.

Seeing what works

As the project continues, it will be interesting to see how the naming convention works. Perhaps trying both Pattern Lab and a new naming convention on a single project will prove too much, in which case I will switch back to using BEM. I’ll report back.