Fist off I probably wouldn't have a class="header" when we have a header tag, but if I did It probably still would't conflict as it is unlikely I'd have flow emphasis in the process... and since a menu is a list, the use of an LI in the selector would reduce the odds of conflict. Particularly when headers are oft built of other block level elements so it's unlikely I'd even have EM as a direct-child.

And really if you can't keep track of something as simple as that, one probably shouldn't be writing HTML or CSS.

Hence your little snippet there isn't "Realistic" since who knows why any of that markup is chosen. CONTENT dictates markup, content + markup + device/user limitations should dictate layout and style.

Particularly with that garbage SCSS practice that means when you have more and more properties it gets harder and harder to figure out what things are applied to. Hence why I'd have:

[parent] > header > em

and

#mainMenu > li em

Respectively. Boom, no conflict.

But really the entire premise of trying to re-use the style on different markup? That's just derp. Semantics exists for a reason, use it. If you change the semantics, BEM will still be invalid if used properly because BEM is supposed to have the tag name in the huffing class names! If you don't do that, you don't have BEM. The E in BEM is for element, you change the element it's not BEM anymore!

As to undoing BEM, no joke -- you're LITERALLY undoing why it exists. The point of BEM isn't to say in the markup exactly what things are applied to, it's for saying in the CSS on each selector what it's being applied to. By breaking it up with SCSS style nesting, you have removed that so that all you see is each-sub piece and you have to scroll up through the nesting to even find the parent!

That's the OPPOSITE of what BEM is even for! I don't like BEM, but I can recognize that right away. You no longer have the full BEM name on every property assignment, unraveling and destroying why BEM even exists.

I don't like BEM any more than I do SCSS, but I understand how/why they're supposed to work. (part of why I don't like them!). But BEM and SCSS style nesting are conceptual polar opposites!

Both generally being -- much like the mental midgetry of front-end frameworks -- just examples of having been CREATED by people who didn't know enough about HTML or CSS to have built such systems, much less have the unmitigated gall to tell others how to build websites.

As is oft proven by how they make people vomit up two to ten times the code needed to do the job, then make unfounded wild claims about how much "easier" it all is.

As evident in your article about your personal site rewrite from a few months back. BTW, said site's dark mode? the magenta doesn't meet WCAG minimums for colour contrast -- something to fix. :D

And apologies if I come across a bit harsh; I'm a New England Yankee... we insult you to your face as we give you the shirt off our back. Differs from the rest of the world where they shower you with platitudes then leave you empty handed.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store