DEV Community

Discussion on: CSS-in-JS: What happened to readability?

Collapse
darkwiiplayer profile image
DarkWiiPlayer

It's 2020 and I still don't understand the appeal of BEM. What's so difficult about writing and reading plain CSS rules without an over-reliance on classes?

Collapse
loujaybee profile image
Lou (🚀 Open Up The Cloud ☁️) • Edited on

I'm not sure I understand your question. The article was addressing this precise point? Unless I'm missing something? Did you disagree with the premise of the article, also?

Collapse
darkwiiplayer profile image
DarkWiiPlayer

The methodology described in the article is precisely about the opposite: make a class for every little thing. Why use button if you can use .my-button instead, and then create lots of utility-classes.

Thread Thread
danieldelcore profile image
Daniel Del Core Author • Edited on

Oh not quite my intent, sorry if it was unclear! I'm suggesting to split things out into variants/modifiers in your code as opposed to calculating specific properties individually, something that i'm seeing a lot in css-in-js land. That might not necessarily mean create a class for everything, using annoying naming methodologies. In the case of CSS-in-JS there might be APIs to help you do that, abstracting the annoyance away and leaving you with the benefits these methodologies provide.

Collapse
jfbrennan profile image
Jordan Brennan • Edited on

Same. I saw BEM back when and thought, "Nooope." I prefer custom HTML tags with utility style classes:

<m-icon name="phone" class="pad-all-lg txt-lg"></m-icon>
Enter fullscreen mode Exit fullscreen mode

Like Custom Elements, but no JavaScript needed. Some of the styles are unique to the component (the custom m- tag), but more styles can be added with utility classes. A good balance between meaningful component API and flexible styling imo

FWIW I have a whole library m-docs.org