logoalt Hacker News

timr • today at 5:37 PM • 1 reply • view on HN

> Well, instead of repeating inline class names everywhere, you end up with CSS properties repeated everywhere. Not really seeing the difference.

Erm...what now? That's so off-the-wall that I can't even wrap my head around your meaning.

Are you trying to argue that because, say, a conventional CSS file has "border:1px" in multiple places, this is somehow equivalent to the Tailwind approach of making a "b1p" class that captures the same thing [1], and plastering it across your templates?

Because a non-abusive application of CSS would actually just put that border property in a semantic class like ".widget" or something, and sure, you'd have multiple "border:1px" declarations across all of your CSS files, but that's irrelevant, because you're not trying to reconstitute every style inline from pseudo-properties.

[1] I am making this example up for illustrative purposes.

Replies

pverheggen • today at 6:27 PM

Yes, that's exactly what I'm saying. You don't end up needing a semantic class like .widget since you likely already have a Widget component in your codebase. Essentially:

  .widget {
    border: 1px;
  }
  
  ...
  
  const Widget = () => (
    <div class="widget"></div>
  );
vs

  const Widget = () => (
    <div class="b1p"></div>
  );
You keep saying this is an abuse of CSS and that's not how it was meant to be used, but why is that so important?