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 - 修饰符表示法）

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

具有常见样式的BEM CSS

1 个答案: