Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Moving away from Tailwind, and learning to structure my CSS

jvns.ca

Post reply on HN
Print view View original

321–330 of 435 posts

Re: Moving away from Tailwind, and learning to structure my CSS

#321

Post by satvikpendem »

9dev wrote: post #120
timr wrote: post #101

Earlier quoted context omitted.

> A Figma component has a certain set of styles, you apply those same styles to the corresponding React component. This is what CSS classes were made for . Of all of the arguments in favor of Tailwind, this is the one that drives me battiest. Say what you will about CSS, but "give a name to a re-usable set of styles for a component" is pretty much as fundamental as you can get. > And none of this really violates DRY,…

> This is what CSS classes were made for. That brings with it the problem of naming a thousand things in a consistent way that everyone on your team needs to understand and remember, otherwise you end up with tons of duplicated classes, parallel systems, and bike shedding. Have we, as an industry, not felt this pain often enough yet? Do we really need to keep banging our head against the wall to figure out it does hu…

CSS modules solve all of these problems.

Re: Moving away from Tailwind, and learning to structure my CSS

#323

Post by yawaramin »

christophilus wrote: post #259
alwillis wrote: post #135

Earlier quoted context omitted.

> tailwind frees you from having to spend excessive time building abstractions of styles/classes that will invariably change. Abstractions like a hero image, a menu, a headline? Sure, it's easy to overthink things but most of the time, it's not that complex. > placing the styles directly into the markup that is affected by it reduces cognitive load, prevents excessively loose selectors In my opinion, it's the opposit…

With CSS names are global. You have to be careful not to accidentally create a class that conflicts with another one used elsewhere in a different context. You have to worry about whether modifying your class will have downstream effects on elements you weren’t intending to impact. It’s a giant pain. I’ve done it by hand for around 20 years before switching to Tailwind. Can vanilla CSS be used for a complex app? Yes.…

> With CSS names are global.

Not necessarily. Nested selectors make it pretty easy to apply styles in a modularized way. See https://rstacruz.github.io/rscss/

Re: Moving away from Tailwind, and learning to structure my CSS

#324

Post by ceedan »

Fine for personal stuff and exploration.

In a work setting, beware of DIY Syndrome. Move away from an established tool, and now your on the hook for documentation, onboarding and maintenance. When the one dev who cares about that leaves the company, everything will fester. It never ends well.

Re: Moving away from Tailwind, and learning to structure my CSS

#325

Post by ruszki »

gf000 wrote: post #239
ghurtado wrote: post #107

Earlier quoted context omitted.

> can tailwind be used poorly? absolutely. but that's true of any tool Can tailwind be a useful CSS framework? Absolutely, but that can be said of any of them. Which is precisely why it makes sense to point out it's unique flaws, so that people can make an informed decision as to what works best for them. If you have some unique feature to tailwind that you think makes it better than the rest, you should share that.…

Even the root comment mentions the exact same failure mode: > If you need extra elements for styling at that point, you might use a div or span (but you should ask yourself if there's something better first). This is IMO not worse than vanilla CSS, and it's simply the only way to have customizable layouting in HTML.

What are the cases when you have to use divs or spans solely for design? When I did such things, it’s only because I was sloppy, or didn’t know back then how to do it without it. But maybe, there are cases, I’ve just never encountered them yet.

Re: Moving away from Tailwind, and learning to structure my CSS

#326

Post by timr »

aleksiy123 wrote: post #315
timr wrote: post #310

Earlier quoted context omitted.

There’s absolutely no tension between locality of behavior and separation of concerns in CSS: you’re putting styles on the elements in the document . The styles are defined elsewhere. It’s like arguing that all of your source code should go in one big file because one file is less than two files, which means greater localization.

Its arguing that that source code that affects the behaviour of something should be easily discoverable from the point/points its behaviour affects. or alternatively more indirection/obfuscation is worse. Its not so much about same file, as reducing distance to understanding, whether visually or by some sort of easily traceable path. Like you would want to init a variable closer to its usage, Or that having a 100 wra…

> Its not so much about same file, as reducing distance to understanding, whether visually or by some sort of easily traceable path.

The metaphor remains valid. You can do this all the way down the abstraction stack, back to functions.

Re: Moving away from Tailwind, and learning to structure my CSS

#328

Post by akersten »

thiht wrote: post #175
zamalek wrote: post #56

What I don't get about tailwind is: why not just use the style attribute at the point?

With Tailwind: With style: Now more interestingly, Tailwind with hover and focus styles: That’s not possible with the style attribute. Even more interesting with Tailwind, a div with dark mode and responsive styles: That’s not possible either with the style attribute. Now your first instinct might be to "that’s unreadable", but keep in mind HOW you actually read and write this code. You’re not actually reading it to…

> Now your first instinct might be to "that’s unreadable", but keep in mind HOW you actually read and write this code. You’re not actually reading it to understand what it does like you do with iterative code. You see how the browser renders it, and you just adapt the code. Tailwind code is mostly write-only and maintained by viewing what the component looks like. This code doesn’t need to be reusable either, the whole component needs to be. The Tailwind code inside is unique.

I think this helped me finally understand the chasm between tailwind proponents and me. I just don't think I'll ever be part of the "keep painting each room a slightly different shade until it looks right" camp, when there's the "you can buy all the same color paint ahead of time, and even have some left over for the next five rooms you build" option right there.

Yeah, tailwind as write-only code definitely tracks. I guess some people like that. Not my bag though.

Re: Moving away from Tailwind, and learning to structure my CSS

#330

Post by jim33442 »

Merad wrote: post #123
JimDabell wrote: post #27

One thing that has always struck me about Tailwind is that practically every argument its proponents use more or less boils down to “I never learnt CSS beyond a junior level” . It’s super common to hear Tailwind advocates say things like “Without Tailwind, we would just have one big disorganised CSS file that always grows uncontrollably and ends up with loads of obsolete stuff in it and !important everywhere! Tailwin…

You aren't wrong, but the _overwhelming_ majority of "full stack" devs I've worked with only know CSS at the most basic level and have little interest in learning it in depth. I myself have been programming for more than 20 years, doing web dev for almost 15, and I can't find the motivation to learn it well. There are too many technical skills to keep up with and CSS is pretty low down on my priority list. I would pr…

This is where I'm at. React makes sense to me in ways that plain CSS doesn't. I've learned about 15 programming languages by now, each time out of necessity, but CSS isn't one of them.
Post reply on HN