What I don't understand is why BEM is scarring. If you're talking about the reason or timing something looks different, you must have named it in that conversation. Just use that name.

"When the menu is wide, the items' icons and text should be visible. When it's skinny, only the icons should be visible. This button toggles between them."

    .menu {}
    .menu--skinny {}
    .menu--wide {}
    .menu__icon {}
    .menu__text {}

Or I could just express this in code once - in the spot where I attach the class names to the HTML - instead of attaching class names, just attach styles.

I'd say BEM was a passing fad, but didn't rule the world. I also think tailwind will suffer the same fate, but we'll see how it plays out.