DEV Community

Discussion on: Friends with BEM-efits

mindplay profile image
Rasmus Schultz

Any thoughts on the :where selector in relation to BEM Elements?

It was always the rule to avoid nested selectors - so if you wanted to style (for example) an unordered list, you needed e.g. a .list block and a .list__item element, since a selector like .list > li would create a specificity problem.

With the introduction of :where, it is possible to do e.g. .list > :where(li) without creating a specificity problem, since :where has zero specificity.

Not that this removes the need for BEM Elements - but in cases where semantic child elements can now be used, some components could be much less verbose and more intuitive to use, without creating problems.

I wonder if it's time for an update of the BEM conventions?