Skip to content

Instantly share code, notes, and snippets.

@adi518
Forked from Integralist/bem.html
Created February 23, 2017 17:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adi518/b780e9487fbee97dccf475f99d2b10b0 to your computer and use it in GitHub Desktop.
Save adi518/b780e9487fbee97dccf475f99d2b10b0 to your computer and use it in GitHub Desktop.
In CSS/BEM: how do we name a sub-block that is related to its parent block?
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment