And why the blue blazes would you want to change the semantic markup to semantically neutral DIV? Then you'd have gibberish markup!

That's one of the MANY BS lies common to BEM that people parrot, that just makes it dumber and dumber and dumber.

Just like the stupidity of <nav class="nav"> -- if you're going to class it give it something meaningful like "mainMenu".

Class="active" is equally rubbish since it could be confused with :active which is why something like "current" or using a <em> tag instead of an anchor --EMphasizing it's the current choice--would be better. Much less if you targeted it as ".mainMenu .active" or ".mainMenu .current" or ".mainMenu em" it's not going to conflict with jack ****.

The modular being equally nonsensical, if you use a parent class unique to it's function -- what it is, why isn't it "portable".

BEM is, generally speaking, code bloat BS that's just as mind-numbingly dumbass as the presentational classes used by frameworks. Congratulations, you've doubled or more the size of your markup, because "wah wah, I'm too dumb to use a document inspector or understand combinators".

That you then defeat the entire point of BEM by nesting selector fragments in the CSS and making it reliant on the equally derpy CSS pre-processor nonsense? Wow... just... wow.

Nothing like doubling down on code complexity and pissing on caching models in the name of "simplicity". Seriously, this nonsense is getting delusional in it's scope and breadth.