DEV Community

loading...

Discussion on: Moving From Tailwind To Vanilla-er CSS

Collapse
chasm profile image
Charles F. Munat

Tailwind, like Bootstrap and all the rest, is for developers who can't be arsed to learn proper CSS. It's a crutch. And when you can't walk, a crutch is great. But eventually you begin to see the downsides of walking with a crutch. You want more.

In a long career as a developer, I have used all kinds of frameworks and libraries. I've mostly given up on frameworks. They make it easy to get started, but eventually they get in your way and make things much harder.

Libraries are a bit better, but depending on other devs to maintain their code, keep it secure and tested, keep it up to date, etc. is a fool's errand. So I have concluded that the fewer dependencies, the better. Add one only when you need most or all of its functionality and writing it from scratch would be onerous.

There is nothing that any of these UI libraries gives me that I can't add myself quickly and easily -- and I've used them all going back to the first versions of scriptaculous. With CSS variables and CSS modules, there's really no reason to use anything else -- unless you simply can't be bothered to learn CSS.

As for the cognitive load of context switching between JS/TS, HTML, and CSS... please. Writing HTML as JSX or CSS as CSS-in-JS is the same cognitive load as putting it in a separate file. Using separate files keeps each clean and focused. It's not about separation of concerns but about separation of duties.

Svelte does a nice job of separating the duties, but then forces them into a single file. That's too bad.

When I code, I keep my component in one pane and my CSS (module) in the pane next to it. If I've drawn my boundaries correctly, all the code in each pane fits on one screen (admittedly, I have big screens). It's all right in front of me. And if I keep to the single responsibility principle, those screens stay short and focused.

That is how you reduce cognitive load -- not by memorizing yet another DSL so you can add ten classes to a component. And Tailwind promotes breakpoints (sm, lg, etc.), which is clearly not the right way to do things. Interfaces should adapt smoothly to changes in the size and aspect ratio of the portal and the zoom.

I know Tailwind is the new hotness right now. I've been forced to use it more than once already. But in a couple of years it will seem obsolete and foolish. Why wait?