Mastering Sass

Naming conventions

You've probably noticed some patterns in the class names I use and also the way I name variables and mixins and functions. Chances are you're not a fan of the long names I use. I get that. I do.

The first time I came across a strict naming convention for class names was something called BEM. BEM stands for Block, Element, Modifier. Chances are you've come across it. The naming convention for BEM looks like this:

.block__element--modifier {...} 

The first time I came across BEM I stopped reading once I saw the rather verbose names it used. "Yuk!" I proclaimed and rapidly closed the tab. The thought of typing all those underscores and hyphens. No thank you.

However, I kept hearing about this BEM methodology and seeing it in tutorials ...