CSS – BEM Naming Convention

Preamble：

•  Recently the team has had to consider code style harmonization

1 What is the BEM naming convention

• 
  Bem is short for block, element, modifier, a front-end CSS naming methodology proposed by the Yandex team.

– underscore : Used only as a hyphen to indicate a link between multiple words in a block or sub-element.

 __ Double underscores: double underscores are used to connect blocks and sub-elements of blocks

_ Single Underline: A single underline is used to describe a state of a block or a child element of a block.

• 
  BEM is a simple yet very useful naming convention. Make your front-end code easier to read and understand, easier to collaborate on, easier to control, more robust and clear, and tighter.

 1.1 BEM naming schema

 The pattern of BEM naming conventions is:

.block {}

.block__element {}

.block--modifier {}

• 
  There should be a namespace (prefix) for each block name.
  •   block represents a higher-level abstraction or component.
  • 
    block__element Represents the descendants of a .block that are used to form a complete .block as a whole.
  • 
    block--modifier Represents a different state or version of a .block. The reason for using two hyphens and underscores instead of one is so that your own blocks can be defined by a single hyphen. E.g.:

.sub-block__element {}

.sub-block--modifier {}

 1.2 Benefits of BEM nomenclature

The key to BEM is to get a more descriptive and clearer structure, where the meaning of a certain markup can be known from its name. So, by looking at the class attribute in the HTML code, you can tell how elements are related to each other.

 Example of regular nomenclature:

<div class="article">
    <div class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>

• 
  This way of writing gives an idea of the meaning of each element in terms of DOM structure and class naming, but does not make clear its true hierarchical relationship. You must also rely on hierarchical selectors to qualify constraint scopes during css definition to avoid cross-component style pollution.

 Examples of BEM naming methods used:

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

• 
  With BEM naming, the module hierarchy is simple and clear, and the css writing doesn’t need to make too many hierarchical choices.

2 How to use BEM nomenclature

2.1 When to use the BEM format

• 
  The trick to using BEM is that you need to know when and what should be written in BEM format.

• 
  The BEM naming convention should not be used everywhere. The BEM format should be used when module relationships need to be explicitly related.

• 
  For example, if it’s just a public individual style, there’s no point in using the BEM format:

.hide {
    display: none !important;
}

2.2 Using the BEM Format in the CSS Preprocessor

• 
  One of the pitfalls of BEM is that the naming scheme is long, ugly and inelegant to write. Compared to the convenience of the BEM format, we should be objective.

• 
  Also, CSS is generally written in preprocessor languages such as LESS/SASS, which makes it much easier to take advantage of their language features.

 Take LESS as an example:

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

2.3 Using the BEM Format in Components of Popular Frameworks

• 
  In the current popular Vue.js / React / Angular front-end frameworks, there are CSS component-level scopes compiled implementation, the basic principle is to use the CSS property selector characteristics, for different components to generate different property selectors.

• 
  When you choose to write in this locally scoped way, the BEM format may seem less important in smaller components. However, for public, global module style definitions, the BEM format is recommended.

• 
  In addition, for public components that are released to the public, this local scoping approach is generally not used to define component styles for the sake of style customizability. This is where using the BEM format can make a big difference.

2.4 Avoiding the .block__el1__el2 format

•  In the deeply nested DOM
•  Under the structure, excessively long style name definitions should be avoided.
• 
  Don’t end up with more than 4 levels or it will make the reading more difficult to comprehend.

 3 Summary

• 
  One of the hardest parts of BEM is clarifying where the scope starts and ends, and when to use it or not. As you gain experience with it, you’ll learn how to use it, and these issues will no longer be a problem. There is no good or bad technique, the right one is the best.

 Recommended writing and style

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

//对应的HTML结构如下：
<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

 4 Related references

• getbem.com
•   github.com/Tencent/tmt…