css BEM 命名规范

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

BEM 命名约定的模式是：

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

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

BEM的优势是：让前端代码更容易阅读和理解，更容易控制和扩展，更加健壮和明确，适合多人协作开发。

看到class名可以获得更多的描述和更加清晰的结构，从其名字可以知道某个标记的含义。通过查看 HTML 代码中的 class 属性，就能知道元素之间的关联。

不足之处： 命名方式长而难看，书写不方便。可以用less或者sass 预处理器。比如：less中 css 嵌套写法，通过&符号去写css。就方便了很多。

怎么使用Bem格式呢。

一个网站，会有网站的头部组件，我们可以定义为 .header, 网站头部子元素，会有导航，这块元素可以定义为 .heander__nav。 导航中会有被选中的状态，我们可以定义为.header__nav--active。.当我们.看到header__nav--active class名的时候，我们可以知道，他的结构是什么样的，当前是什么样的状态。

什么时候应该用 BEM 格式。

并不是每个地方都适合使用 BEM 命名方式。当需要明确关联性的模块关系时，应当使用 BEM 格式。封装复用性组件的时候，也需要使用BEM格式，比如 element-ui 组件库 css 命名就是使用的BEM格式。

一些公共的单独的样式，就没有必要使用 BEM 格式：

比如：

.hide {
    display: none !important;
}

只是用来隐藏元素的，就没有必要使用了BEM格式了。

BEM是css命名规范的一种，还有OOCSS和SMAcss命名规范。不论是哪一种，都有它的优点和缺点。没有好坏之说，选择适合的自己的就好。没有使用BEM命名格式的前端小伙伴可以去了解一下。

代码规范很重要，每种语言都有自己的规范，建议开发团队，都制定对应的代码规范，大家都去执行，不仅有助于自身的成长，还可以促进团队合作，降低维护成本。