34

In BEM, I understand that with modifiers, two dashes makes sense so that you can distinguish the modifier in my-block-my-modifier with my-block--my-modifier.

But why use block__element instead of block_element?

Gil Birman
  • 35,242
  • 14
  • 75
  • 119

6 Answers6

64

Double Underscore is used to define sub element of a block.

i.e:

<nav class="main-nav">
    <a class="main-nav__item" href="#">Text</a>
</nav>

Where main-nav is a block & main-nav__item is a sub element.

This is done because some people might name their block like this main_nav which will create confusion with single underscore like this : main_nav_item

Therefore double underscore will clarify stuff like this: main_nav__item.

Imran Bughio
  • 4,811
  • 2
  • 30
  • 53
12

I'm going to 2nd @Imran Bughio's answer, but I'm trying to further clarify the issue.

In standard BEM style, single underscores are reserved for modifiers. Also, they usually represent a combination of key/value pairs. E.g. 

.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small

This is in contrast to the modified BEM syntax championed by inuit.css for example, which are boolean. 

.block--vertical
.block--horizontal
.block__element--big
.block__element--small

From my experience when using the modified syntax, you quickly run into expression limitations. E.g. if you would write

.block--align-vertical
.block--align-horizontal
.block__element--size-big
.block__element--size-small

The key/value relation would not be unique, if you would try to describe a key such as background-attachment which would result in

.block__element--background-attachment-fixed

Another added benefit is, that you can use the libraries based on the standard naming convention for added productivity in your workflow:

mlnmln
  • 575
  • 2
  • 10
  • 1
    I don't see the problem with using double dash for modifiers... it's visually different enough to underscore that it makes makes class names with modifiers look different enough. If we're talking about how complex something looks... `.block__element_background-attachment-fixed` isn't really much different from using double-dash though is it, except that now, at first glance your class looks like a `block__element` not a `block__element--modifier`? scanability in a codebase is all about shapes – airtonix Feb 12 '18 at 21:28
7

It's also worth mentioning that the BEM syntax is not forced upon us and if you find another syntax that you find more readable then by all means go with that. The important thing is consistency, ensuring other developers work to the same syntax.

An example of an alternative syntax used is in SUIT CSS by Nicolas Gallagher. Which uses the following syntax.

ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfComponent

You can read more here SUIT CSS naming conventions

Colin Bacon
  • 15,436
  • 7
  • 52
  • 72
  • Thanks Colin, I really like SUIT CSS naming as well and **[plan on using it in the near future](https://github.com/gilbox/futuristic-sass-guide)** – Gil Birman Jul 25 '14 at 13:50
4

Because whose blocks can be hyphen or underscore delimited, for example:

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

or

.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */
simhumileco
  • 31,877
  • 16
  • 137
  • 115
1

According to BEM naming convention, single underscore has two other usages,

  1. The modifier name is separated from the block or element name by a single underscore (_).
  2. The modifier value is separated from the modifier name by a single underscore (_).

So for separating element name from the block name is done by a double underscore.

The element name is separated from the block name by a double underscore (__).

Pradeepal Sudeshana
  • 908
  • 2
  • 14
  • 30
0

The basic concept: block-name__element-name_modifier-name

Further details: BEM (Block, Element, Modifier)

David Martins
  • 1,830
  • 6
  • 22
  • 30