Hacker News Reader

Comment by rahkiin | Hacker News Reader

I dismissed most of the content because you’re missing a full css re-implementation of your primary class. It would have at least as many lines as the Tailwind classes and have extra blocks for before, for example.

Either way, all these classes/css end up in a Button component for my site.

View on HN

> at least as many lines as the Tailwind classes

Have you ever used vanilla CSS? Please try to replicate that black button! You'd be surprised how much less it requires. No &>[data-slot=icon]]:-mx-0.5 or anything like that needed

I have for many years! And this block needs media queries and stuff for active and other states. That line you quote is .primary>[data-slot=icon] { margin-left: -0.5rem; margin-right: -0.5rem: }

And you still need 60+ lines to create a button like that?

Come on - your turn. Come back with your version of that Catalyst button that does everything that’s being done by those Tailwind styles.

I've written an entire article that about Tailwind's "don't clean things up" attitude:

https://nuejs.org/blog/tailwind-vs-semantic-css/

The bloat takes several forms

1. The amount of source HTML/CSS needed

2. The code complexity (class & DIV/SPAN "soup")

3. The weight of CSS & JS on the resulting website

Happy to write a comparison to Calypso, which is on a whole new level. Betting 10-20x bloat differences to semantic CSS.

Both this and the post you linked are great.

I do think it would be great to make a follow-up post on Calypso, even if only on the button. Looking forward to it.

Reply on news.ycombinator.com