« Back to Index

In CSS/BEM: how do we name a sub-block that is related to its parent block?

View original Gist on GitHub

bem.html

<!-- Simplest solution is to just label the element as a element within an element -->
<div class="block">
  Content
  <div class="block__element">
    Content
    <div class="block__element__element">
      Content related to `block__element`
    </div>
  </div>
</div>

<!-- You could have a separate block element inside of the parent block but how does the naming convention work? -->
<div class="block">
  Content
  <div class="block__element">
    Content
    <div class="newblock">
      Content related to `block__element` but is now namespaced under `newblock` which is wrong
    </div>
  </div>
</div>

<!-- Harry Roberts suggestion -->
<div class="block">
  Content
  <div class="block__element newblock">
    Content
    <div class="newblock__element">
      Content related to `block__element` but is now namespaced under `newblock` which is wrong
    </div>
  </div>
</div>