My Take on OOCSS, SMACSS and BEM

If you're familiar with CSS and Sass, you've likely come across different approaches people take to write their class names.

Here's an approach I've been using that's been working well for me.

BEM (block, element, modifier) is a widely adopted front-end naming methodology.

Commonly BEM uses double dashes and double underscores. The reason being, you can then use single dashes as well, whilst double distinguish the differences between the block, element or modifier. Here's an example:

Standard 'BEM' way

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Component
.component-name {
  background: red;
}

// Component with an element
.component-name__element-name {
  background: yellow;
}

// Component with an element that has a modifier
.component-name__element-name--modifier-name {
  background: green;
}

My BEM Approach

Especially with the last example, I find it hard to process when scanning quickly. Here's how I do things. I use camelCase for my block, element and modifiers, then use a single underscore or dash to split things up:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Component
.componentName {
  background: red;
}

// Component with an element
.componentName_elementName {
  background: yellow;
}

// Component with an element that has a modifier
.componentName_elementName-modifierName {
  background: green;
}

Read on to learn how I name CSS classes using consistent naming conventions.

Consistent CSS Class Naming Conventions