具有常用样式的 BEM CSS

Question

在使用全局样式时，我有点困惑。考虑以下几点：

假设我有一个样式表，它定义了如何制作按钮：

/* Button.CSS */
button {
  background-color: #CCC;
}

button.Blue {
  background-color: #00F;
  color: #FFF;
}

Button.Blue.Hollow {
  background-color: none;
  border: 1px solid #00F;
  color: #00F;
}

然后您将模板中的按钮与标准 BEM 表示法一起使用（我将使用 Block__Element--Modifier 表示法）

<!-- index.html -->
<ul class="Widget">
  <li class="Widget__Item">
    <button class="Widget__Button"></button>
  </li>
  <li class="Widget__Item">
    <button class="Widget__Button Blue"></button>
  </li>
  <li class="Widget__Item">
    <button class="Widget__Button Blue Hollow"></button>
  </li>
</ul>

这样混合课程是可以接受的做法吗？我觉得我违反了一些封装块样式的规则。

Answer 1

我觉得我违反了一些封装块样式的规则。

的确如此。 Button 应该是一个块，而不是一个元素。 Blue 和 Hollow 是修饰符。

使用Block__Element--Modifier 语法，您的代码应该是：

.Button {
  background-color: #CCC;
}
.Button--Blue {
  background-color: #00F;
  color: #FFF;
}
.Button--BlueHollow {
  background-color: none;
  border: 1px solid #00F;
  color: #00F;
}

<ul class="Widget">
  <li class="Widget__Item">
    <button class="Button"></button>
  </li>
  <li class="Widget__Item">
    <button class="Button Button--Blue"></button>
  </li>
  <li class="Widget__Item">
    <button class="Button Button--Blue Button--BlueHollow"></button>
  </li>
</ul>

或者，您可以使用MyBlock-myElement.myModifier 语法（更接近您的方式）：

.Button {
  background-color: #CCC;
}
.Button.blue {
  background-color: #00F;
  color: #FFF;
}
.Button.blue.hollow {
  background-color: none;
  border: 1px solid #00F;
  color: #00F;
}

<ul class="Widget">
  <li class="Widget-item">
    <button class="Button"></button>
  </li>
  <li class="Widget-item">
    <button class="Button blue"></button>
  </li>
  <li class="Widget-item">
    <button class="Button blue hollow"></button>
  </li>
</ul>