Multi-word Names

BEM names intentionally use double underscores and double hyphens instead of single to separate Block-Element-Modifier. The reason is so that single hyphens can be used as word separators. Class names should be very readable, so abbreviation isn’t always desirable unless the abbreviations are universally recognizable.

UI

TO DO SOMETHING!

Source

<!-- 👍 DO THIS -->
<div class="some-thesis some-thesis--fast-read">
  <div class="some-thesis__some-element"></div>
</div>

<!-- 👎 DON'T DO THIS -->
<div class="somethesis somethesis--fastread">
  <div class="somethesis__someelement"></div>
</div>