BEM 示例 HTML

BEM是一种CSS命名约定，有助于提高代码的可重用性和可读性。BEM代表块（block），元素（element）和修饰符（modifier）。

以下是一个基本的BEM示例HTML代码：

<div class="block">
  <div class="block__element"></div>
  <div class="block__element--modifier"></div>
</div>

在这个示例中，我们有一个块名为“block”，它包含两个元素：“element”和带修饰符“modifier”的“element”。让我们深入了解这些概念。

块（block）

块代表独立的页面组件或功能。块应该是可重用的，因此将其命名为简短且描述性的常用名词是很有帮助的。

在示例代码中，我们的块名称为“block”。

元素（element）

元素是块中的部分。元素不能存在于其它块中，它们只能提供与其父块有关的上下文。

在示例代码中，我们的元素名称分别为“element”和“element--modifier”。

修饰符（modifier）

修饰符用于修改块或元素的外观或行为。修饰符应该是描述性的，以便于理解和重用。

在示例代码中，我们的修饰符名称为“modifier”。

总结

BEM是一种有助于提高CSS代码可重用性和可读性的命名约定。通过将CSS类分为块、元素和修饰符，我们可以创建模块化、可扩展且易于维护的CSS代码。

通过示例HTML代码，我们了解了BEM的基本原则，包括块、元素和修饰符。现在您已经掌握了这些基本概念，请尝试使用BEM命名约定编写干净、整洁的CSS代码吧！