css - 具有通用样式的 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>

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

Answer 1

I feel like i'm violating some rule of encapsulated block styling.

的确如此。Button 应该是一个 block ，而不是一个元素。 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>