Question

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

首先假设方法

考虑那些a是具有不同类名的单独元素，根据其类名集a's效果。

＆＃13;

hover

＆＃13;

.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;
}

＆＃13;

第二种假设方法

我在这里混淆，BEM是否允许我们为元素创建不同的修饰符，或者它是否允许我们仅为块创建修饰符？我的意思是在这种方法中，所有<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>具有相同的类名，根据我们的需要，我们可以应用这些修饰符类。

＆＃13;

a's

＆＃13;

.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;
}

＆＃13;

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

Answer 1

你接近第二个假设！

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

修饰符名称通过单个下划线（_）与块或元素名称分隔。

修饰符值通过单个下划线（_）与修饰符名称分隔。

对于布尔修饰符，名称中不包含该值。

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

请注意，我们在链接类上使用默认悬停，不需要“普通”悬停类。我们用特殊类覆盖了需要的地方。此外，我正在使用官方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中的元素创建不同的修饰符

1 个答案: