BEM of CSS specification

Whether it is for team consideration or subsequent maintenance, it is really important to standardize CSS naming!

Here is one of the CSS naming conventions: BEM.
First post a sample website about the BEM specification: https://9elements.com/bem-cheat-sheet/#form-blocks

Introduction to BEM

BEM, full name: Block (block), Element (element), Modifier (modifier). Proposed by Yandex (Russian local search engine) company, it is suitable for componentized development mode.

Advantages and disadvantages

The disadvantage is that the writing style is ugly, but its advantages far outweigh the blemishes on its appearance. The hard part is figuring out where the scope starts and ends, and when to use it or not. With the accumulation of continuous use experience, we will gradually know how to use it, and these problems are no longer a problem.

The advantage is that the structure is clear , but sometimes code redundancy occurs. In order to avoid writing too much repetitive code, we must learn to be good at using precompiled languages ​​(use @include @extend appropriately, etc.)

Naming rules

Just like the name, the example is: block__element–modifier

block (B) : block, each block is an independent function, and blocks can be nested with each other.

• The name can be composed of multiple words, each word is linked with -, such as: main-nav
• The role of the block is only to play an isolation role. Generally, the style of the specific component will not be implemented in the block. For the block modification style such as size, the position can be set through the modifier
• Pass between block and modifier – link

element (E) : The element depends on the existence of the block, cannot exist independently, and must be nested inside the block.

• The name can be composed of multiple words, each word is linked by -
• The element style must depend on the existence of the block, the element is the specific implementation of the block, and the block and the element are linked by __
• In element, you can define the style of each element itself. For element modification styles such as size and state, you can set them through modifiers
• Between element and modifier through – link

modifier (M) : Modifier, modify the state and appearance of E or B.

• The name can be composed of multiple words, each word is linked by -
• modifier can modify the state, behavior, size, etc. of block and element

Note
1. It is not recommended to use labels or ids as selectors, and class names should be used as selectors.
(1) id is due to the weight problem, and there will be duplication of id for spa projects;
(2) label selector When we need to modify the component deconstruction, we also need to maintain the component style;
2. It is not recommended to use parallel selector, should be implemented using modifiers.
3. Pseudo-class selectors are not recommended and should be implemented using modifiers.
4. It is not recommended to use global css styles such as rest.css and common.css. However, some formatting styles can still be used, and all purposes are for the convenience of maintenance.

example

Example 1:

<div class='main-nav'>
    <span class='main-nav__item qf-rate__item--active'></span>
    <span class='main-nav__item'></span>
</div>

Example 2:

<ul class='list'>
    <li class='list__item'>1</li>
    <li class='list__item'>
        <ul class='list list--second'>
            <li class='list__item list__item--seconed'></li>
        </ul>
    </li>
</ul>

There are other CSS specifications, such as SMACSS, OOCSS, etc., which will be posted later.