Live data from Hacker News

Moving away from Tailwind, and learning to structure my CSS

jvns.ca

91–100 of 435 posts

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

#91
Nice article!

I'm a fan of removing any dependencies on external libraries and writing my own solution from scratch, but there's a good reason why I decided not to do so with Tailwind: They offer an optimization for production that ensures that you never ship more than the bare minimum of CSS needed. This means you can keep your palette of color, spacing, and other options fully enumerated in `globals.css` and elsewhere, without worrying whether you're using all those variants in production. Moreover, if you're working within a framework, such as Next.js, this minimization step automatically happens when you build, without even having to worry about whether it's happening. This alone is a compelling reason, at least for me, not to migrate from Tailwind.

Also, I've never found any restrictions in Tailwind in using inline CSS that weren't readily navigable, or in implementing really nice responsive grids that handle different screen widths for instance using Tailwind's grid tooling. I definitely have solved each of the scenarios described in this article using Tailwind or a Tailwind-CSS combination, but it's true that they don't have grid-column-areas natively. Still, I haven't yet found that to be a significant restriction in getting responsive grid layouts.

I think the biggest issue with Tailwind is simply that it takes a long time to get used to reading it. We all learn that inline CSS is bad, globally scoped CSS is best, etc., and we get used to seeing clean simple HTML. Then we look at real-world code featuring Tailwind and it just looks so hard to read at first, especially because the lines are so long. I guess I just have been using it long enough that I've gotten completely used to the way it looks, but I do remember it took me a very long time to get comfortable with reading Tailwind. After a long while, I concluded that, for me, Tailwind really is more efficient and maintainable and even more readable, but it definitely took quite a bit.

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

#92
I really, really love Julia Evans writing.

She writes from a place of vulnerability and honesty. Most people write to sound smart and she writes to say "I don't know it all but there are some things I discovered I want to share." I almost feel like she writes to share things with people she loves, even though she doesn't know them directly.

She spoke alongside Randall Munroe at the last Strange Loop (RIP). Some people waited to talk to him afterwards, but I waited to talk to her. I don't think she got my joke that she should rewrite her bash scripts into perl and for that I'm truly sorry.

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

#93

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…

Isn't the same true of those who use a library that wraps SQL?

I would think manipulating CSS through user input is both less common as an application pattern and less critical as an attack surface.

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

#94
html encodes a tree of objects

css applies attributes to objects via graph queries

the queries are tightly coupled to the tree. you must work hard to avoid scatter gun edits now. it doesn't make much sense to have attributes stores in a separate location to their use

it would be like assigning all of your instances attributes using decorators

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

#95
post #36

Earlier quoted context omitted.

if we get our first blind user I will gladly make some admends to make it more usable for them. Not good enough. You have to be accessible before it is needed in order to avoid legal liability. And how do you expect to get a blind user if they already cannot use your product? None of the doctors I build web sites for are currently blind. I know this because I talk to them regularly. But I still build the web sites fo…

You call it lazy. I call it "focus" or avoiding pre-mature optimization. I find the "legal liability" claim hilarious... I do better than 95% of the web: as I said I HAVE some screen reader directives (just did not test it), and labels to make the app more accessible.

> You call it lazy. I call it "focus"

Is this to be read that disabled people and their needs, or more directly from the replied-to comment, "doing the right thing", are not a focus of yours, flossly?

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

#96
post #54

> I got curious about what writing more semantic HTML would feel like. I've been teaching semantic HTML / accessible markup for a long time, and have worked extensively on sites and apps designed for screen readers. The biggest problem with Tailwind is that it inverts the order that you should be thinking about HTML and CSS. HTML is marking up the meaning of the document. You should start there. Then style with CSS.…

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. but that's true of any tool i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled…

If a tool’s design makes it easy to cut myself, the response is not “people have been cutting themselves for years”.

There is such a thing as the ergonomics of the tool. Yes div soup has been around a long time. But also yes, Tailwind makes the wrong approach the easy one.

It’s ergonomics encourage adding div elements to support styles. It’s the core design loop.

You’re conflating “forces to” and “ergonomically encouraged”.

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

#97

I think the (misuse of) so-called "separation of concerns" has been the most harmful thing that happened in web front end development. HTML can CSS are the same kind of concerns: the presentation layer. The idea that HTML is purely semantic and has nothing to do with presentation is just burying the head in the sand. Separating HTML and CSS into different files is just like separating a bunch of methods/functions int…

There are different types of separation of concerns :) https://x.com/simonswiss/status/1664736786671869952

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

#98
post #70

Earlier quoted context omitted.

The common arguments against Tailwind usually derive from total ignorance of working with CSS on large scale projects with many team members. And when this is pointed out you’ll usually get replies that just hand wave it away as not a problem, as if things like BEM were invented for no reason.

Yeah, that's a straw-man. I've worked on large-scale projects with many team members, and it's perfectly possible to use CSS as it was designed. But sure, like most tools, it starts with understanding how it works.

Sure, but "total ignorance of how CSS is made to work" is also a straw man.

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

#100
post #54

Earlier quoted context omitted.

you're unfairly conflating things and putting the blame for a lack of care or understanding on tailwind vs on the dev themselves. nothing about tailwind forces you to build inaccessible or "div soup" apps can tailwind be used poorly? absolutely. but that's true of any tool i've been writing CSS for ~20 years and am quite capable with it, having used CSS, Less, SASS/SCSS, Stylus, PostCSS etc. the reason i have settled…

> nothing about tailwind forces you to build inaccessible or "div soup" apps Totally agree. I feel like this was more a by product of React. Not that React forced this either, but it felt like the rise in both went hand in hand for some reason. While I think it's true that none of the current top FE technologies force the div soup, they don't discourage it either. It would be nice if what ever FE technologies catch o…

React encouraged this for years by requiring a single parent element being returned from all components. They also showed a div as the option of choice.

They fixed this later with Fragments but the damage was done.

Post reply on HN