BEM命名元素 - 修饰符

概述

BEM是一种常用的命名约定方式，用于创建可重用、可扩展的代码模块。BEM命名约定包括块(Block)、元素(Element)和修饰符(Modifier)。

BEM命名约定的基础是块(Block)，它代表一个独立的模块。元素(Element)代表块(Block)的一部分。修饰符(Modifier)代表块(Block)或元素(Element)的特定状态或变化。

在BEM命名约定中，用双下划线(__)分隔块(Block)和元素(Element)；用双中划线(--)分隔块(Block)或元素(Element)和修饰符(Modifier)。

块(Block)

块(Block)是一个独立的模块，应该是可重用的，即可以在页面上出现多次。块(Block)应该有一个描述性的名字，以反映其目的。

例如，一个按钮(Button)块的命名应该是button。

<button class="button">Click me</button>

元素(Element)

元素(Element)是一个块(Block)的一部分。它不能独立存在，并且只在其父级块(Block)的上下文中有意义。元素(Element)应该以块(Block)的名字为前缀，用双下划线(__)分隔。

例如，一个按钮(Button)块的文本元素的命名应该是button__text。

<button class="button">
  <span class="button__text">Click me</span>
</button>

修饰符(Modifier)

修饰符(Modifier)代表块(Block)或元素(Element)的特定状态或变化。修饰符(Modifier)应该以块(Block)或元素(Element)的名字为前缀，用双中划线(--)分隔。

例如，一个实心按钮(Button)的修饰符(Modifier)的命名应该是button--solid。

<button class="button button--solid">Click me</button>

混合(Mix)

混合(Mix)表示一个或多个块(Block)和/或元素(Element)的组合。在BEM中，混合(Mix)使用空格分隔。

例如，有一个头部(Hero)块和一个按钮(Button)块。将这两个块(Block)结合在一起，创建一个头部(Hero)块，其中包括一个按钮(Button)块，命名为hero hero--with-button。

<section class="hero hero--with-button">
  <h1 class="hero__title">Welcome to our site</h1>
  <button class="button hero__button">Learn more</button>
</section>

总结

BEM命名约定通过使用块(Block)、元素(Element)和修饰符(Modifier)来创建可重用、可扩展的代码模块。块(Block)代表一个独立的模块，元素(Element)代表块(Block)的一部分，修饰符(Modifier)代表块(Block)或元素(Element)的特定状态或变化。

在实践中，遵循BEM命名约定使代码更有组织、更可维护，并且易于扩展。