1. What is the BEM naming convention

BEM stands for block, element, or modifier

2. Learning BEM well needs to master:

Block 2 Element 3 Modifier 4 – (hyphen) : Used only as a conjunction character, indicating a link between words of a block or child element. 5, __ (double underline) : the child element used to link a block to a block. 6, — (double center line) : The child element used to link a block to a modifier

3, THE benefits of BEM naming

The core of BEM naming is that it can clearly describe the structure of a page. The meaning of a tag can be known from its name, so that the association between elements can be seen by looking at the class attribute.

4. Relationship between Block, Element and Modifier

Block: an independent entity that makes sense in its own right: header, container, aside

Element: a part of a block (usually a child of the block) such as item

Modifier: Modifier used to change the appearance or behavior of blocks or elements such as Red, Size, or Disabled

5. Several common cases of BEM

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

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

.block-name{}  
.block-name__element{}  
.block-name__element--modifier{}

.block-name{}  
.block-name__element-name{}  
.block-name__element-name--modifier{}

.block--modifier{}  

Copy the code

6. Application of BEM in practice

Let’s take an example of a list of items

<style>
    .project-list{}
    .project-list__item{}
    .project-list__item--red{}
    .project-list__item--green{}
</style>

<div class="project-list">
    <div class="project-list__item"></div>
    <div class="project-list__item--red"></div>
    <div class="project-list__item--green"></div>
</div>
Copy the code

7. Use BEM in LESS or SASS

.project{
    height:100px;
    &__item{
        height:50px;
        &--red{
            color: red;
        }
    }
}

.project {
  height: 100px;
}
.project__item {
  height: 50px;
}
.project__item--red {
  color: red;
}

Copy the code

8. Personal feelings

BEM naming conventions bloated the sense that gives a person is good, the name of the class for a long, but still recommended in development follows the BEM naming conventions, it is only a thought, convenient and standardize the name of the class in our development, we have higher the readability of the code, the difficulties of BEM is not how to use, but do you want to use, where it is used, You have to be flexible not all places have to follow the BEM naming conventions,