CSS 中的 BEM 规范

雨点打透心脏的1/2处 2022-12-14 13:36 147阅读 0赞

# BEM 规范 #

BEM 是块（block）、元素（element）、修饰符（modifier）的简写，由 [Yandex][] 团队提出的一种前端 CSS 命名方法论。

规范默认有以下的几个约定：

*  `-` 中划线：仅作为连字符使用
 *  `--` 双中划线：表示不同状态或不同版本
 *  `__` 双下划线：双下划线用来连接块和块的子元素

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

其中

*  .block 代表了更高级别的抽象或组件。
 *  .block\_\_element 代表.block的后代，用于形成一个完整的.block的整体。
 *  .block–modifier代表.block的不同状态或不同版本。

### 优点 ###

通过 BEM 的命名规范，可以让前端代码更容易阅读和理解，更加的语义化，更容易协作，更容易控制，更加健壮和明确，而且更加严密。

下面是一些例子，方面更深入的理解。

css 选择器：

//css .form {  }
    .form--theme-xmas {  }
    .form--simple {  }
    .form__input {  }
    .form__submit {  }
    .form__submit--disabled {  }

### 缺点 ###

*  BEM 的一个槽点是，命名方式长而难看，书写不雅。相比 BEM 格式带来的便利来说，我们应客观看待。
 *  而且，一般来说会使用通过 LESS/SASS 等预处理器语言来编写 CSS，利用其语言特性书写起来要简单很多。

### BEM 和预编译结合 ###

.header { 
        &__body { 
            padding: 20px;
        }
        &__button { 
            &--primary { 
                background: #329FD9;
            }
            &--default { 
                background: none;
            }
        }
    }

### Reference ###

*  [http://getbem.com/naming/  
    ][http_getbem.com_naming_]

[Yandex]: https://yandex.com/
[http_getbem.com_naming_]: http://getbem.com/naming/