0

グローバル スタイルの使用に関しては、少し混乱しています。次の点を考慮してください。

ボタンの作成方法を定義するスタイルシートがあるとします。

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

そのようなクラスを混在させることは、許容される慣行ですか? カプセル化されたブロックのスタイリングのルールに違反しているように感じます。

4

1 に答える 1

5

カプセル化されたブロックのスタイリングのルールに違反しているように感じます。

それはそう。 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>
于 2014-11-26T08:50:47.037 に答える