BEM CSS命名规范的介绍

BEM CSS命名规范

BEM（Block Element Modifier）是一种CSS命名规范，它的目的是让代码更具可读性，提高代码的可维护性。它的命名规则是：

• block：代表一个独立的实体，可以是一个组件，也可以是一个页面，用来描述一个独立的实体；
• element：代表block的一部分，只有在block内才有意义；
• modifier：代表block或element的修饰，用于改变block或element的样式。

BEM的命名规范也有一定的规则：

• block的命名使用小写字母、中划线和下划线，不能使用空格；
• element的命名使用小写字母、中划线和下划线，同时必须以两个下划线开头；
• modifier的命名使用小写字母、中划线和下划线，同时必须以一个中划线开头。

BEM的命名规范可以帮助我们更好的组织代码，使得代码更具可读性，更易于维护。下面是一个使用BEM命名规范的例子：

.block {
    /* block styles */
}
.block__element {
    /* element styles */
}
.block--modifier {
    /* modifier styles */
}

可以看到，使用BEM命名规范可以让我们更容易的识别block、element和modifier，从而提高代码的可读性和可维护性。