[gitgud]

Well I guess it’s already been 5 years since I’ve used tailwind and everyone still agrees that:

    mb-5 = margin-bottom: 5x (something)

There’s a use for utility css, it’s becoming standardised in a way, and I predict it will continue to be used and understood in another 5 years

[toastal]

Everyone? I wasn’t sure. I doubt a fresh-outta-CSS-bootcamp person would either.

It’s ‘standardized’ within its niche. Niches can have shorthands, but breaking into mainstream seems a bit lofty considering the ambiguity from the outside (I’ve never used regularly) as well as how much & how far you can get with CSS without a library (not saying there’s not obvious places for libraries).

You could be more clear by writing margin-bottom-5, but then you reinvented CSS. And using shorthands for singular properties feels like reinvented CSS—especially since the name implies you can’t even refactor mb-5 { margin-bottom: 6α }. If you can’t use it to refactor, what’s its point?

[gitgud]

> Everyone? I wasn’t sure. I doubt a fresh-outta-CSS-bootcamp person would either.

You could say the same about any api not being immediately obvious.

> And using shorthands for singular properties feels like reinvented CSS

It’s quite a nice way to describe css in my experience. The shorthand classes actually teaches you css too. As they’re basically a 1-1 mapping, but you can write them much faster than manually writing the styles

It also scales well, as you don’t get crazy css class hierarchy’s that are hard to modify.

> you can’t even refactor mb-5 { margin-bottom: 6α }. If you can’t use it to refactor, what’s its point?

Not impossible, I mean you can easily edit the tailwind.config to be different for mb-5. Or search all relevant instances of mb-5 and replace them with mb-6 for example.

I think it’s best for component-driven development, where you want to encapsulate styles with components and not have them dependent on the context that their in. It does make the HTML more verbose, but development much easier and faster

[toastal]

In the last case, had you just used a CSS variable, you could just change that.