I'm new to the BEM methodology for CSS, and I have a question regarding the children of a modifier.
Let's say I have this HTML:
<div class="block-container">
<div class="block-container__element"></div>
</div>
To block-container
I add the modifier block-container--modifier
.
The CSS would look like this:
.block-container {
...
}
.block-container__element {
...
}
.block-container--modifier {
...
}
And this is my question: how can I change some CSS attributes from __element
when I add the modifier?
I have read that we should avoid "nesting" (that nothing depends on a parent), but I suppose that on some occasions, like this one, that rule or suggestion must be broken in order to change some styles, right?
I use pure CSS, no pre-processor like SASS or LESS.
If you need to modify attributes to
.block__element
, simply create a class which uses a descendant selector for itself, ie.block--modifier .bock__element
.Example
Source: Can a block modifier affect elements?