[toastal]

If you know CSS, you can write CSS. Sometimes utilities add indirection that’s harder to follow in the long term—especially with folks that aren’t already using these utilities. In 10 years, will it be easier to follow `mb-5` as medium border 5, middle box-shadow 10, margin block 5rem, min-block-size 10, mix-blend-mode 5, mild black version 5? If the utility has many properties tied to them (e.g. those softer shadows of layered box-shadow) named .stackedShadow--depth3 this sort of utility has earned its value that will be easy to understand why it exists vs. .pt-6 when an explicit value or CSS variable could have sufficed. This doesn’t apply to all cases, or all projects, but I would predict in 5 years the fad of pushing everything into a utility will be dead in favor of moderate usage.

[Kiro]

Yes, I also agree that we should use inline styles for everything. The problem with CSS is the C. I don't want to come up with class names or put styles in a separate file or even a separate section in the same file (Vue). I want to look at the tag and immediately see how it's styled. No hidden or indirect styling whatsoever.

[toastal]

My CSP won’t be happy to include unsafe-inline. Inline styles are hard to override. Not overthinking but I try to put some consideration for the folks using userStyles for their accessibility.

Naming things is often hard, but at least with UI you’re usually building something concrete so there should be some name—if not a wrapper that holds more loose parts you can’t easily control (like a #Content element around some reStructuredText output).

The cascading part is a double-edged sword tho. It can be used to great effect for good, but it can be unweildy with a disparate or undisciplined team. But it’s often better to work with it rather than fight uphill against the only style engine we have in browsers (if feasible)—the output will generally be smaller & easier to follow with less to know or maintain.

[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.