3 ms·
> 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
by 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.