4 ms·
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
by rahkiin 3y ago
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.
- tipiirai 3y ago> 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
- rahkiin 3y agoI 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: }
- tipiirai 3y agoAnd you still need 60+ lines to create a button like that?
- unculture 3y agoCome on - your turn. Come back with your version of that Catalyst button that does everything that’s being done by those Tailwind styles.
- tipiirai 3y agoI've written an entire article that about Tailwind's "don't clean things up" attitude: https://nuejs.org/blog/tailwind-vs-semantic-css/ 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.
- lawn 3y agoBoth 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.