Hacker News Reader

Comment by immibis | Hacker News Reader

I still don't understand how not naming things is a benefit over inline styles? With inline styles, instead of class="bg-blue" you'd write style="background-color:blue" and then you could remove an entire build step and an entire dependency because the browser already supports this.

View on HN

You can override bg-blue with a more specific selector or a user stylesheet, which you cannot do with inline styles.

That; and also adjacent selectors, pseudo elements, media queries, variants, dark mode handling, state handling (hover, focus, etc.), and much more.

So you make the bg-blue style make things yellow?

No, but your designers have decided instead of cornflower blue, they want it to be aqua instead. Have fun searching for all variants of the color in your stylesheets—including CSS varsity, hex codes and rgba variants. In Tailwind, all you need to do is update the config file, and it'll apply to backgrounds, text, shadows, anything.

Well that's why we use CSS variables and any change would apply everywhere and also give us semantic information with naming like color-primary or color-surface.

So you write a rule to say that blue buttons are actually yellow?

Then someone sees the code for a button which is clearly marked as blue and will be surprised it's yellow.

Try to imagine that was an example. There was even another response mentioning different shades of blue. Imagine one might override it locally, just for one widget. Imagine one had a style (something other than color, even) that wasn't designed to reference a CSS variable ahead of time. Imagine there's no heaven.

Reply on news.ycombinator.com