css命名bem

前言

BEM（块、元素、修饰符）是一种用于命名CSS类的方法论，它的目的是提供一种一致性和可扩展性的命名规范，帮助开发人员编写易于理解、可维护和可重用的CSS代码。本文将介绍BEM的基本概念和使用方法，并通过示例代码说明它的用途和规范。

什么是BEM

BEM是一种基于模块化的CSS命名规范，它将CSS类分为三个部分：块（block）、元素（element）和修饰符（modifier）。

1. 块（block）是一个独立的可重用组件，它代表页面中的一个独立部分，如导航栏、按钮、表单等。块的命名应该简洁、清晰，并使用连字符作为单词的分隔符，如`.nav-bar`。

2. 元素（element）是块的一部分，不能独立存在。它描述了块内的不可分割的元素，如导航栏中的链接、按钮中的文本等。元素的命名应该以块的名称为前缀，使用双下划线作为分隔符，如`.nav-bar__link`。

3. 修饰符（modifier）用于改变块或元素的外观、状态等。它可以用于添加或移除特定的样式。修饰符的命名应该以块或元素的名称为前缀，使用双连字符作为分隔符，如`.nav-bar--active`。

BEM的代码示例

下面的代码示例演示了如何使用BEM进行CSS类命名：

<nav class="nav-bar">
  <a class="nav-bar__link">Link 1</a>
  <a class="nav-bar__link nav-bar__link--active">Link 2</a>
  <a class="nav-bar__link">Link 3</a>
</nav>

在上面的示例中，`.nav-bar`是一个块，表示导航栏。`.nav-bar__link`是导航栏的一个元素，表示链接。`.nav-bar__link--active`是修饰符，表示活动状态的链接。

总结

BEM是一种有助于编写可维护和可重用的CSS代码的命名方法论。它通过将CSS类分为块、元素和修饰符，提供了一种一致性和可扩展性的命名规范。使用BEM可以使CSS代码更易于理解、修改和扩展，提高开发效率和代码质量。