基本概念

CSS 的命名规范又叫做BEM规范，为的是竣事杂乱的命名方式，到达一个语义化的CSS命名方式。 BEM是三个单词的缩写：Block（块）代表更高级别的抽象或组件，Element（米素） Block的后裔，以及Modifier（修饰） 差别状态的修饰符。

命名方式：

.block__element--modifier {
    display: flex;
}
.block--modifier {
    display: flex;
}
.block__element {
    display: flex;
}

<p class="9d9f-5875-f09b-9d1f header">
    <p class="5875-f09b-9d1f-b44c header__body">
        <button class="f09b-9d1f-b44c-b92e header__button--primary"></button>
        <button class="4a4a-1769-4424-96dd header__button--default"></button>
    </p>
</p>

通过BEM的命名规范我们可以到达一个什么目的呢？就是有一个清晰的形貌，从上面的代码中我们可以看到一层一层的清晰明晰，而且有一个清晰的结构。

1 block

block 代表一个更高级别的抽象或者是一个组件，它仅仅作为一个界限。它主要的功效有下面三点：

卖力形貌功效的，不应该包罗状态。

    /* correct */
    .header {
    
    }
    
    /* wrong */
    .header--select {
    
    }

不影响自身结构，不包罗详细的样式，也就是block内里不应该加样式

    /* correct */
    .header {
    
    }
    
    /* wrong */
    .header {
        margin-top: 50px;
    }

不能使用米素选择器和ID选择器

    /* correct */
    .header {
    
    }
    
    /* wrong */
    .header a {
        margin-top: 50px;
    }