BEM -- css命名规范

什么是BEM

BEM(Block, Element, Modifier)是由Yandex团队提出的一种前端命名规范。其核心思想是将页面拆分成一个个独立的富有语义的块（blocks）,从而使得团队在开发复杂的项目变得高效，并且十分有利于代码复用，即便团队引入新成员，也容易维护。在某种程度上，BEM和OOP是相似的。

如何命名BEM

BEM：块（block）、元素（element）、修饰符（modifier）

Block:一个独立的，可以复用而不依赖其他组件的部分，可作为一个块
Element:属于块的某部分，可作为一个元素
Modifier:用于修饰块或元素，体现出外形行为状态等特征的，可作为一个修饰器

下面展示一些 代码片段。

//css为例
<p class="article">
    <p class="article__body">
        <p class="tag"></p>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </p>
</p>

//less为例
.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

来源

链接: https://blog.csdn.net/eunice_sytin/article/details/83341381