BEM is DUMB. Don’t Use Mostly Borked

Jason Knight
Level Up Coding
Published in
4 min readDec 13, 2020

--

Photo by La-Rel Easter on Unsplash

I want to like BEM — Block, Element, Modifier — I really do! Any time someone comes up with a uniform consistent naming scheme, I’m usually all-in… BUT… when it comes right down to it how it works and what it does defeats most if not all of why HTML exists and why CSS is separate from it.

It reeks of people too stupid to understand the simplicity of selectors, combinators, and proper semantics trying to just slop classes everywhere to fix their own ineptitude; when really if using combinators and the proper markup is “so hard” you need this stuff, maybe it’s time to give up, walk away, and go flip burgers for a living.

Really this pissing on the markup with classes for EVERY joe-blasted tag? That’s the true annoyance. Between the bald faced LIE on how “classes are faster” and the rather insulting idea that specificity is “too hard for normal people”, BEM is built on a foundation of those pesky “3i” of web development: ignorance, incompetence, and ineptitude.

You know what’s NOT faster? Using two to ten times the HTML needed to do the job. You know what’s bad for accessibility? Not using the proper semantics. You know what makes hard to maintain CSS? Not leveraging your semantics to do the real work!

I mean, take just the very first example code off the official site:

<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button>

Really, a button is a button? WHO KNEW!?!

And in their CSS:

.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}

Is “.button” really magically better than just “button”? Or “.button — state-success” somehow a miracle worker compared to “button.success”? It is quite literally code-bloat nonsense that fails to understand how HTML/CSS even are supposed to operate.

--

--

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse