I am using BEM for the first time in my latest project, using SASS and I love it. A lot of refactoring going on, however. One thing that I have not solved is the following, very common situation:
I have a block with a modifier, let's say .block, and .block_wide. In .block_wide there are multiple elements that will get minor tweaks depending on what block they are in. For example .block__image has to get a 100% width when the block is .block_wide. How to write this, preferably in scss?
This is the HTML situation:
<div class="block">
<div class="block__image"></div>
</div>
<div class="block block_wide">
<div class="block__image" /></div>
</div>
These are some wrong answers I came up with:
.block {
&__image { width: 50%; }
// Block level modifier
&_wide {
&__image { // This does not work because it results in an entirely new class that is not used in the markup
width: 100%;
}
}
}
In the previous "solution" I'm trying to write it the way I would like it to work but obviously it doesn't.
The next solution works but it feels absolutely wrong:
.block {
&__image {
width: 50%;
.block_wide & {
width: 100%;
}
}
// Block level modifier
&_wide {} // Nothing here
}
Now there is no clarity in the source css at all and very quickly this will get out of hand. I'm probably trying to use BEM in a way that it's not meant to be used. If someone could enlighten me on the matter!
