开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情

CSS中BEM的命名规范

随着现在前端开发越来越复杂，越来越多的人开始使用BEM命名规范，这里简单介绍一下BEM的命名规范。

什么是BEM

BEM是Block Element Modifier的缩写，意思是块、元素、修饰符。

这是为了更好的管理实现开发中对CSS类名的命名，使得后期对代码更好的迭代维护。

BEM的命名规范

BEM的命名规范是由三部分组成的，分别是块、元素、修饰符。

我们会使用几个特殊的连接词将这三个部分连接起来，然后作为一个完整的CSS类名。

• 对于块与元素之间的连接，我们使用两个下划线__连接。（div__span）
• 对于块与修饰符之间的连接，我们使用两个连字符--连接。（div--red）
• 对于元素与修饰符之间的连接，我们使用两个连字符--连接。（div__span--red）

块（B）

块是一个独立的实体，可以是一个页面，也可以是一个组件，比如一个按钮，一个导航栏，一个页面等等。

我们可以这样理解，块就是我们CSS里面的父级元素，比如ul，它一般会有子元素li，这个时候我们就可以把ul作为一个块，li作为一个元素。

ul__li

当我们对块级进行修饰的时候，如果不能只用一个单词进行描述，我们可以使用-来进行连接，button-area。

元素（E）

元素是块的一部分，它是块的子元素，比如块是一个导航栏，那么元素就是导航栏的子元素，比如导航栏的菜单项，导航栏的菜单项的链接等等。

我们可以把元素理解为块的子元素，比如ul，它的子元素就是li，那么li就是ul的元素。

ul__li

修饰符（M）

修饰符是对块或者元素的修饰，比如块的颜色，块的大小，块的状态等等。

比如在ElementUI中，它的按钮有三种颜色，代表三种状态，我们就可以根据它的状态来进行修饰。

button--primary button--success

BEM的优点

• 有利于代码的复用
• 代码的可维护性
• 代码更加便于阅读

总结

BEM的命名规范是为了更好的管理实现开发中对CSS类名的命名，使得后期对代码更好的迭代维护。

在日常开发中，我们应该养成良好的命名习惯，这样可以使得我们的代码更加的规范，更加的便于阅读，更加的便于维护。