Interesting opinion about semantic css naming

Victor
Mon, 04 May 2020 05:39:53 +0000

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

Title ,

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 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 and a lot of more classes. I’d prefer to get the “weight” of code from HTML to css, so that both are clean.