4 ms·
It’s funny, as someone that’s been using CSS for decades I don’t really know how to respond because the scenario outlined here is not one I recognise. My button
by afavour 2mo ago
It’s funny, as someone that’s been using CSS for decades I don’t really know how to respond because the scenario outlined here is not one I recognise. My button would be a <button>, so no, I wouldn’t have a .button class, it’s superfluous.
What I would have is:
- a global palette specified via CSS variables
- overrides for dark mode etc specified at the global level so I don’t have to worry about it at the component level
- CSS module files so I specifically don’t need to care for the context of my entire project, just the classes for my current component
Of course, you stopped thinking about CSS a decade ago so you don’t know about any of these improvements. Which is fine but it strikes me as a little strange to be so boastful of ignorance.
As someone who has barely touched Tailwind I’m genuinely curious: if you wanted, say, a consistent border color for use across your project how would you? Are you defining a class name in JS for use with $framework_name? And do you really style each component separately for dark mode? Repeating the same modifiers over and over?
- Aeolos 2mo agoYou just make a design system in your tailwind.css, following the documentation. You can optionally use something like daisyui if you do not have designer skills or the time. That handles consistent sizing, spacing, text, colors, dark mode, and anything else your design system needs. It all compiles down to css in the end, so no runtime overhead and gives you the superior tailwind dx during development.
- throwaway9an1zx 2mo agoAlmost none of that is specific to Tailwind though, you can take any design system in CSS with or without JS and make the same argument right?
- ffsm8 2mo agoWhat do you think tailwind is? It's a utility to generate deduped/treeshacken css classes - according to a config file the parent mentioned It's not some grand framework or something. It's literally doing exactly what the grand parent said. Define root css variables, and generate the applicable/used css classes that were used in the code
- throwaway9an1zx 2mo agoI use Tailwind for work and hobby projects and what you said is exactly what I think Tailwind is and why I use it. I don’t understand where the disagreement is. I was only pointing out a lot of the “magic” from Tailwind’s abstraction isn’t as magical as the GP you referred to implies.
- ffsm8 2mo agoI see, I must've misunderstood your comment earlier.
- Aeolos 2mo agoThe poster I responded to, specifically asked for how to implement this in tailwind, with a worry about "do you really style each component separately for dark mode? Repeating the same modifiers over and over?" I simply answered his question - tailwind is indeed just plain old CSS with a more ergonomic DX.
- stasomatic 2mo agoWe are stuck with CSS, but all these CSS styling frameworks just tell me CSS needs to be bulldozed. I looked up DaisyUI that you mentioned. The example on the home page gets rid of chained classes and replaces them with one: // Styling a simple button <button class="btn"> daisyUI Button </button> So, we are back to regular CSS?
- satvikpendem 2mo agoCongratulations, you reinvented regular CSS.
- Aeolos 2mo agoIf that is so, why are people getting up in arms about tailwind?
- satvikpendem 2mo agoIf it's just CSS then why would I use Tailwind instead of the actual thing? It's a layer of indirection for no reason if it's the same.
- Aeolos 2mo agoIf BEM is regular CSS, why would I use BEM instead of the actual thing? It's a layer of indirection for no reason if it's the same. You use Tailwind in the same way you use BEM: becuase it makes it easier for frontend developers to write correct CSS.
- satvikpendem 2mo agoYou're right which is why I don't use BEM, it has no advantages over regular CSS, same with Tailwind.
- Aeolos 2mo agoYou do you, but thankfully the rest of the industry disagrees with you.
- satvikpendem 2mo agoClearly it doesn't, hence articles like the OP.
- SebastianKra 2mo agoAre you suggesting to style the tag name directly? Because that would create chaos in a codebase. <button> is for semantics. It's possible that other design system components need the same semantic element.
- afavour 2mo agoNo, I’m suggesting that .button.something-else wouldn’t make any sense. You’d just do button.something-else… not that it would really be that useful to do so. And as you say, it’s for semantics so I wouldn’t use .button anyway as it doesn’t carry the right specificity for styling.