Introduction to CSS BEM Naming Standard (Recommended)

1 What is BEM Naming Standard

Bem is the abbreviation of block, element, modifier, and is a front-end CSS naming methodology proposed by the Yandex team.

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 explicit, and more rigorous.

1.1 BEM Naming Pattern

The pattern for the BEM naming convention is:

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

• Blocks represent higher-level abstractions or components.
• block__element represents the descendants of .block and is used to form a complete .block as a whole.
• block--modifier represents different states or versions of .block.

The reason for using two hyphens and underscores instead of just one is so that you can define your own blocks with a single hyphen. like:

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

1.2 Benefits of BEM Nomenclature

The key to BEM is that you can get more descriptions and a clearer structure, and you can know the meaning of a tag from its name. Therefore, by looking at the class attributes in the HTML code, you can know the relationship between elements.

Examples of common nomenclature:

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

This writing method can understand the meaning of each element from the DOM structure and class naming, but it cannot clarify its actual hierarchical relationship. When defining CSS, you must also rely on hierarchical selectors to limit the scope of constraints to avoid cross-component style pollution.

Example using the BEM naming method:

<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>

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

2 How to use BEM nomenclature

2.1 When should you use BEM?

The trick to using BEM is knowing when and what should be written in BEM format.

Not everything should use BEM naming. The BEM format should be used when explicit module relationships are required.

For example, if it is just a single public style sheet, there is no point in using the BEM format:

.hide {
    display: none !important;
}

2.2 Using BEM format in CSS preprocessors

One complaint of BEM is that the naming method is long, ugly and inelegant to write. Compared with the convenience brought by the BEM format, we should look at it objectively.

Moreover, CSS is generally written using preprocessor languages ​​such as LESS/SASS, which makes it much easier to write 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 BEM format in components of popular frameworks

In the currently popular front-end frameworks such as Vue.js/React/Angular, there are compilation implementations of CSS component-level scope. The basic principle is to use the CSS attribute selector feature to generate different attribute selectors for different components.

When you choose this local scope approach, BEM formatting may not be as important in smaller components. However, for public, global module style definitions, it is recommended to use the BEM format.

In addition, for public components released to the outside world, this local scope method is generally not used to define component styles for the sake of style customizability. This is also where using the BEM format comes in handy.

2.4 Avoid the .block__el1__el2 format

In deeply nested DOM structures, avoid defining very long style names.

3 Conclusion

One of the hardest parts of BEM is figuring out where scope starts and ends, and when to use it or not. As you gain experience with it, you will gradually learn how to use it, and these problems will no longer be a problem. There is no good or bad technology, the most suitable one is the best.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.