LoveWithFood Tech

LWF

Quick Thoughts on BEM

| Comments

Our team is using SMACCS to make the life of front end development shinier. Several days ago, my teammates introduced me to another awesome CSS methodology called BEM. I noticed it has some comparable points with SMACSS, but is slightly different.

Concepts

SMACCS BEM
Layout No direct equivalent
Module Block
No direct equivalent Element
State Modifier

Let’s review SMACCS first:

Layout rules divide the page into sections. Layouts hold one or more modules together.

Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.

State rules are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive? They are about describing how a module or layout looks on screens that are smaller or bigger. They are also about describing how a module might look in different views like the home page or the inside page.

BEM, on the other hand, has the following concepts:

Block: The sole root of the component.

Element: A component part of the Block.

Modifier: A variant or extension of the Block or Element.

Comparison

It looks like the State of SMACCS and Modifier of BEM are similar. However, the other components of the two methodologies have some differences.

SMACSS has Layouts and Modules. Layout represents the section of a page while Module represents a feature or part of a page.

In contrast, BEM has Blocks and Elements. BEM represents all things as Blocks, whether they are sections or modules. A block can contain multiple blocks. Element is the detail of a block.

BEM naming gives a stricter convention to define every corner of a page. Because it provides a standard which expresses the whole page in its language, it also gives us a way to unify the understanding of the page within a team. We can all use block, element and modifier to discuss the “feeling” of a page.

For example, “Look at the score box block. Its title element needs to be aligned center and its score element should be smaller” is easier to understand than “Look at the page, the text ‘some text’ need to be aligned center and the button should be smaller (only the developer knows the element that is implemented as a button)”. This is just a small example but we can imagine BEM would be helpful when we discuss a complicated page within the team.

Using BEM

Let’s see a simple example. Here is a demonstration which uses BEM. The block is score-box, and the element is score with some modifiers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.score_box {
  // some default block styles
}

.score_box__score--1 {
  // element score, mod 1
}

.score_box__score--2 {
  // element score, mod 2
}

.score_box__score--3 {
  // element score, mod 3
}

.score_box__score--4 {
  // element score, mod 4
}

.score-box--wider {
  // block mod 1
}

It’s clear what each class does, but we duplicate many score-box and score here. If we need to change the name, we need to change them all. It’s not hard but it breaks the DRY rule. So…

Let SCSS do the tricks

We can use SCSS to simplify the definition. We can assign selectors to local variables and use & to concatenate block selectors to element selectors:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$block: score-box;

.#{$block} {
  // some default block styles

  $element: score;

  &__#{$element}--1 {
    // element score, mod 1
  }

  &__#{$element}--2 {
    // element score, mod 2
  }

  &__#{$element}--3 {
    // element score, mod 3
  }

  &__#{$element}--4 {
    // element score, mod 4
  }
}

.#{$block}--wider {
  // block mod 1
}

The CSS looks more DRY now. However we should avoid nesting multiple level classes in order to gain more readability.

Ending

There is much more to SMACCS and BEM than what I have just written. However, I prefer BEM because it provides a way to express the page precisely and is easy to use with SASS. For a Rubyist and Rails fan, that’s not a problem :)

Comments