What is the BEM naming convention

  • Bem, short for Block, Element, modifier, is a front-end CSS naming methodology proposed by Yandex team.
  • Hyphen: Used only as a hyphen to indicate the connection between words of a block or child element.

__ Double underline: Double underline is used to connect a block to its children

_ Single underscore: A single underscore is used to describe a state of a block or its children

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

1.1 BEM naming mode

The pattern of the BEM naming convention is:

.block {}

.block__element {}

.block--modifier {}
Copy the code

  • Each block name should have a namespace (prefix)

    • blockRepresents a higher level abstraction or component.
    • block__elementRepresents the descendants of.block and is used to form a complete.block whole.
    • block--modifierRepresents different states or versions of.block.

Using two hyphens and underscores instead of one allows your own blocks to be delimited by a single hyphen. Such as:

.sub-block__element {}

.sub-block--modifier {}
Copy the code

Benefits of 1.2 BEM nomenclature

The key to BEM is that you can get more description and a clearer structure, and you can know what a tag means from its name. You can then see the associations between elements by looking at the class attribute in your HTML code.

Examples of general nomenclature:

<div class="article">
    <div class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>
Copy the code
  • This approach gives you a sense of what each element means from its DOM structure and class naming, but not its true hierarchy. When CSS is defined, you must also rely on hierarchical selectors to limit the scope of constraints to avoid style contamination across components.

An 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>
Copy the code
  • With BEM naming, module hierarchy is simple and clear, and CSS writing does not have to make too many hierarchy choices.

2 How to use BEM nomenclature

2.1 When should BEM format be used

  • The trick with BEM is to know when something should be written in BEM format.
  • Not every place should use BEM naming. The BEM format should be used when relational module relationships need to be clarified.
  • For example, it makes no sense to use the BEM format for a single common style:
.hide { display: none ! important; }Copy the code

2.2 Using the BEM format in the CSS Preprocessor

  • One of BEM’s problems is that its naming is long and ugly, and its writing is inelegant. The convenience of the BEM format should be put in perspective.
  • Also, CSS is typically written in a preprocessor language such as LESS/SASS, which is much easier to write with.

Take LESS as an example:


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

2.3 Use the BEM format in components of popular frameworks

  • In the current fashionVue.js / React / AngularAnd other front-end frameworks, there are CSS component-level scope compiler implementation, its basic principle is to use CSS property selector characteristics, for different components to generate different property selector.
  • When you choose this local scoped approach, the BEM format may not be as important in smaller components. However, for common, global module style definitions, the BEM format is recommended.
  • In addition, for public components that are published to the outside world, this local scoped approach is not usually used to define component styles for style customizability. Using the BEM format at this point also makes a lot of sense.

2.4 Avoid the.block__el1__el2 format

  • Nested DOM at a deep level
  • Structure, avoid long style name definitions.
  • Don’t go beyond level 4 at the end of the level, otherwise it will make the reading more difficult

3 summary

  • One of the hardest parts of BEM is figuring out where the scope starts and ends, and when to use it or not. As you get more experience with it, you’ll learn how to use it and it won’t be a problem. Technology is neither good nor bad, but the right side is the best.

Recommended writing style and style

.form { } .form--theme-xmas { } .form--simple { } .form__input { } .form__submit { } .form__submit--disabled { } // The corresponding HTML structure is as follows:  <form class="form form--theme-xmas form--simple"> <input class="form__input" type="text" /> <input class="form__submit form__submit--disabled" type="submit" /> </form>Copy the code