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.