What is the CSS BEM naming convention? Summary of BEM Naming conventions (detailed)

BEM is a shorthand for block (block), element, and modifier (modifier), which is a very useful naming convention. To make your front-end code easier to understand and tight, let's take a look at what the BEM naming convention is all about.

1 What is the BEM naming convention

Bem is a shorthand for blocks, elements (element), modifiers (modifier), and a front-end CSS naming methodology presented by the YANDEX team.

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

1.1 BEM naming mode

The schema for the BEM naming convention is:

.block {}
.block__element {}
.block--modifier {}

• A block represents a higher level of abstraction or component.

• Block__element stands for. The descendants of block, used to form a complete. block of the whole.

• Block--modifier represents the different states or versions of a block.

Use two hyphens and underscores instead of one so that your own blocks can be defined with a single hyphen. Such as:

.sub-block__element {}
.sub-block--modifier {}

Benefits of 1.2 BEM nomenclature

The key to Bem is that you can get more descriptions and clearer structures, from whose names you can know the meaning of a tag. Then, by looking at the class attribute in the HTML code, you can know the association between the elements.

Example of a general naming method:

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

This kind of writing can understand the meaning of each element from the DOM structure and class naming, but it cannot define its true hierarchical relationship. When you define a CSS, you must also rely on the hierarchy selector to constrain the constraint scope to avoid style contamination across components.

An example of a BEM naming method is used:

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

With the BEM naming method, the module hierarchy is simple and clear, and there is no need to make too many hierarchical choices in CSS writing.

2 How to use the BEM naming method

2.1 When should I use the BEM format?

The trick to using BEM is to know when something should be written in BEM format.

Not every place should use the BEM naming method. You should use the BEM format when you need to explicitly correlate a module relationship.

For example, just a public individual style, there is no use of the BEM format meaning:

.hide {
    display: none !important;
}

2.2 Using the BEM format in the CSS preprocessor

One of the slots in the BEM is that the name is long and ugly, and the writing is indecent. Compared to the convenience of the BEM format, we should look at it objectively.

Also, it is generally easier to write CSS using a preprocessor language such as Less/sass, using its 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 the popular framework

In the current popular vue.js/react/angular, such as the front-end framework, there are CSS component-level scope of the compilation implementation, the basic principle is to take advantage of CSS property selector features, for different components to generate different property selectors.

When you select this local scope, the BEM format may seem less important in smaller components. However, for public, global module style definitions, it is recommended to use the BEM format.

In addition, for public components that are released externally, this local scope is not used to define the component styles for the sake of the customization of the style. The use of the BEM format will also be a big color.

2.4. Format for avoiding. Block__el1__el2

In a deep nested DOM structure, you should avoid too long a style name definition.

3 Summary

One of the hardest parts of

BEM is the clarity of where the scope starts and ends, and when to use or not to use it. As you continue to use the accumulated experience, you will slowly know how to use, these problems are no longer a problem. Technology is not good or bad, the right side is best.