-
-
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?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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