BEM 命名

BEM 命名是一种前端开发的命名方法论，它的全称是块（Block）、元素（Element）、修饰符（Modifier）命名法（Block Element Modifier Naming Convention）。它是由 Yandex 团队提出的，目的是解决 CSS 选择器的层级和样式的命名冲突问题，提高代码的可复用性和可维护性。

命名规则

BEM 命名法的基本规则如下：

• 块（Block）：独立的 UI 组件或模块，例如 button、menu。
• 元素（Element）：块内部的子元素或组成部分，例如 button 的 text、menu 的 item。
• 修饰符（Modifier）：用来修改块或元素的外观、状态或行为，例如 button 的 primary、menu 的 horizontal。

命名规则使用连字符-来连接块、元素和修饰符，同时使用双下划线__来表示块和元素之间的关系，使用双连字符--来表示块或元素的修饰符，例如：

/* 块 */
.btn {}

/* 元素 */
.btn__text {}

/* 块的修饰符 */
.btn--primary {}

/* 元素的修饰符 */
.btn__text--bold {}

命名优点

• 易于理解和维护：BEM 的命名规则直观明了，易于理解和维护。
• 代码可读性高：BEM 的命名规则将样式和 HTML 结构分离，使代码更具可读性，方便协同开发和维护。
• 降低 CSS 权重：BEM 的命名规则使用了较短的选择器，避免了选择器的上升级别，降低了 CSS 的权重。
• 可重用性：BEM 的命名规则使得代码更具可重用性，可以在不同的项目中快速进行样式复用。
• 统一性：BEM 的命名规则可以使得代码层次结构统一，组件间的关系也清晰可见。

命名缺点

• 命名冗长：BEM 的命名规则较为冗长，尤其在嵌套较多的情况下，容易使代码过于臃肿，样式表大小也相应增大。
• 命名不够简洁：BEM 的命名规则需要写明块、元素和修饰符的名称，使得代码显得不够简洁。
• 开发效率低：BEM 的命名规则需要花费一定的时间来书写和理解，对开发效率有一定的影响。

结语

BEM 命名法是一个非常适合大型项目或者协同开发的前端命名方法，目前已经得到了越来越多前端开发者的认可和应用。当然，它也有自己的一些缺点，并不是适合所有的项目和场景，需要在实际开发中根据具体情况进行选择和使用。