Interesting opinion about semantic css naming

#1

I was taught that when you make a css class you should name it semantically. Like, you should have, say,

<p class="red">Title</p>,

because if you later want to you title to be green, you’ll have

.red {
   color: green;
}

However I see that https://tailwindcss.com/ gains popularity. As I understand this is kind of bunch of helper classes, like "okay, this div should be rounded and big and on mobile it should be small sm:small and it has red background background-red.

Same classes are in bootstrap.

I’ve just realized that when you building an app with components approach, it won’t matter match, since instead of <p class="red"> you’ll have <my-title>. And the title should be relatively small component. And here you can even inline css, even though it’s not that beautiful, but who cares:

  1. It won’t break anything, since css styles are isolated inside component
  2. The component is small
  3. We use the component multiple times

So libs like https://tailwindcss.com/ looks quite convenient.

But also it’s a bit clumsy, I mean, you’ll end up with <p class="big rounded with-shadow padding-10 white-background black-text..."> and a lot of more classes. I’d prefer to get the “weight” of code from HTML to css, so that both are clean.

1 Like
#2

Utility classes are really good.
That’s basically more or less human language translation from CSS gibberish.

If I understood correctly in tailwind you are meant to create your own class from the utility classes so that it is “a-damn-good-button” that has all those classes.

I might be wrong. I haven’t gave tailwind much of a chance since I didn’t get how to make it work with Angular and it is my framework of choice for now.

#3

I agree with you. HTML code becomes clumsy if you apply too many utility classes. You also get a less independent CSS.

I prefer using BEM methodology and often break the DRY (do not repeat yourself) rule just to keep my HTML code clean.
Example:

HTML:

<div class="widget"></div>

<div class="plugin"></div>

CSS:

.widget{
    background-color: white;
}

.plugin{
    background-color: white;
}

See, I repeat myself like a noob :sweat_smile:
But at the end of the day, I spend less time fixing or customizing my modules.

The good thing about over-using utility classes if that you can instantly onboard new team members: they do not need to learn much to start editing your code.

#4

Just wanted to say that I hate BEM :face_with_symbols_over_mouth:

#5

Why? :thinking:

#6

It’s disgusting !

All these one-to-three__for-five and-again_lalala

loong classes

Also, I’m pretty sure when it comes to component based frameworks with isolated styles then there is no need in BEM

  1. The components should be small, so there is not that much css
  2. Css is isolated. So you can only make a mistake if you use the same style selectors in the same component. But this is very rare and easy to catch