BEM CSS with common styles

Question

I have a bit of confusion when it comes to using global styles. Consider the following:

Say I have a stylesheet that defines how buttons should be made:

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

and then you use the button in the template with your standard BEM notation (I'll use the Block__Element--Modifier notation)

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

Is that the acceptable practice to mix classes like that? I feel like i'm violating some rule of encapsulated block styling.

score 5 · Accepted Answer · answered Nov 26 '14 at 08:50

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

Indeed. Button should be a block, not an element. Blue and Hollow are modifiers.

With the Block__Element--Modifier syntax, your code should be:

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

Alternatively, you can use a MyBlock-myElement.myModifier syntax (closer to your way):

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

Ah, that sounds good. I can still modify the last item if i wish, correct? Say.. ` — Handonam, Nov 26 '14 at 17:04
It's better to use a modifier on the block `Button`. The block `Button` doesn't need to know if it is on the last position. It just need to display with the "red" variant. — Paleo, Nov 27 '14 at 07:23
Thanks Tarh! To supplement your answer, this helped: http://bem.info/tutorials/start-with-project-stub/#Mix-of-blocks-and-elements — Handonam, Dec 05 '14 at 18:24

BEM CSS with common styles

1 Answers1