我们可以为 BEM 中的元素创建不同的修饰符吗

Question

嘿，伙计，我正在学习 BEM 方法，面临着理解一些事情的问题。例如有一个 unordered list 是一个块。这个 ul 有一些 li's 和 a's 我们在 BEM 中称之为元素。

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-list__link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}

.c-list__link:hover {
  color: red;
}

<ul class="c-list">
  <li class="c-list__item">
    <a href="#" class="c-list__link">1</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link">2</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link">3</a>
  </li>
    <li class="c-list__item">
    <a href="#" class="c-list__link">4</a>
  </li>
</ul>

所有 a's 都具有相同的悬停效果，但是如果我只想更改第 2 个和第 3 个 a 的悬停效果，那么我的方法是。

先假设方法

考虑那些 a's 是具有不同 class 名称的独立元素，根据它们的 class 名称设置 hover 效果。

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-list__link, .c-list__special-link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}
.c-list__link:hover {
  color: red;
}
.c-list__special-link:hover {
  color: orange;
}

<ul class="c-list">
  <li class="c-list__item">
    <a href="#" class="c-list__link">1</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__special-link">2</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__special-link">3</a>
  </li>
    <li class="c-list__item">
    <a href="#" class="c-list__link">4</a>
  </li>
</ul>

第二种假设方法

我很困惑，BEM 允许我们为一个元素创建不同的修饰符还是它只允许我们为块创建修饰符？我的意思是，在这种方法中，所有 a's 都具有相同的 class 名称，并且根据我们的需要，我们可以应用这些修饰符 classes.

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-list__link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}
.c-list__link_hover-normal:hover {
  color: red;
}
.c-list__link_hover-special:hover {
  color: orange;
}

<ul class="c-list">
  <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-normal">1</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-special">2</a>
  </li>
   <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-special">3</a>
  </li>
    <li class="c-list__item">
    <a href="#" class="c-list__link c-list__link_hover-normal">4</a>
  </li>
</ul>

那么在这种情况下我们应该怎么做？

Answer 1

您接近第二个假设！

根据官方文档：https://en.bem.info/methodology/naming-convention/#naming-rules

The modifier name is separated from the block or element name by a single underscore (_).

The modifier value is separated from the modifier name by a single underscore (_).

For boolean modifiers, the value is not included in the name.

<div class="menu menu_hidden"> ... </div>
<div class="menu menu_theme_islands"> ... </div>

请注意，我们在 link class 上使用默认悬停，不需要 "normal" 悬停 class。我们用特殊的 class 覆盖需要的地方。此外，我使用的是官方 BEM 命名约定，您可以自由使用双连字符样式。您的代码应如下所示。

.c-list__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-list__link {
  text-decoration: none;
  font-size: 14px;
  color: green;
  transition: all 0.3s;
}
.c-list__link:hover {
  color: red;
  outline: 1px solid red;
}
.c-list__link_hover_special:hover {
  color: blue;
  outline: 1px solid blue;
}

    <ul class="c-list">
      <li class="c-list__item">
        <a href="#" class="c-list__link">1</a>
      </li>
       <li class="c-list__item">
        <a href="#" class="c-list__link c-list__link_hover_special">2</a>
      </li>
       <li class="c-list__item">
        <a href="#" class="c-list__link c-list__link_hover_special">3</a>
      </li>
        <li class="c-list__item">
        <a href="#" class="c-list__link">4</a>
      </li>
    </ul>

我们可以为 BEM 中的元素创建不同的修饰符吗

Can we create different modifiers for an element in BEM

css

bem