BEM命名规范

BEM全称是 Block Element Modifier，是用来帮助在前端工程中构建易用性强的组件和代码的方法，是一个非常有用、强大且简单的命规范，使得前端代码更容易阅读和理解，更容易使用，更容易扩展，更健壮。

在一些小的前端工程中，css代码的风格对于项目的维护影响不大；但是在多人协作的项目以及组件库中，良好的css命名规范可以提升开发效率，提高项目的可维护性。

BEM的命名规范与它的命名（Block Element Modifier）关系密切：

Block

独立、有意义的实体，如：header，container，menu，checkbox，input；
name通常由字母、数字和破折号组成

Element

是Block的一部分，语义上跟Block相联系，如：menu item，list item，checkbox caption，header title；
name通常由字母、数字、破折号和下划线组成，通常是格式是[blockname]__[element name]

Modifier

是Block或Element的修饰标志，用来改变外观或行为，如：disabled，highlighted，checked，fixed，size big，color yellow；
name通常由字母、数字、破折号和下划线组成，通常是格式是[blockname]__[element name]--[mod]、
[blockname]--[mod]

一个

image.png

参考: http://getbem.com/