Ask HN: Overwhelmed by CSS Frameworks, Help | Hacker News Reader

Ask HN: Overwhelmed by CSS Frameworks, Help

4 pointserlich5 comments

Building UI used to be fun when there were limited choices. You would use bootstrap and sass/less or css modules, and just get things done.

Now there are just so many options to choose from and such a feeling of FOMO.

Each new one that comes out and moves up the rankings (https://2022.stateofcss.com/en-US/css-in-js/) makes me feel a need to evaluate it. There is always a little benefit from each new framework but then it also can make other things harder.

I really just want nice pre-built components to use.

Tailwind has great components and templates, but its such a mess too look at when you want to deal with dynamic styles, and is slow to compile with webpack and tricky with monorepos, and then you have to use things like twind, twin.macro, windicss.

I miss the days of jquery + sass so badly. It was so straightforward. Nested css for everything and then when you need complex stuff: just use jquery to add/remove styles.

Every single new framework has so many edge cases that just wear you down. Styled Components and Emotion seemed so great, but just so many freaking edge cases, and perf issues.

Is design and UI the thing you're trying to differentiate your work on?

If not, don't worry about it, just pick a solid option (and honestly, even Bootstrap is still just fine), learn it well, including its limitations, and move forward.

When a replacement comes along that is so compelling you just have to switch, you'll know.

If design and UI is your differentiator, well, you're going to have to live with a lot more experimentation and testing, because the world of design is much more fad and fashion driven.

> I really just want nice pre-built components to use.

> Every single new framework has so many edge cases that just wear you down. Styled Components and Emotion seemed so great, but just so many freaking edge cases, and perf issues.

It seems like you're talking about two different things, you say you want pre-built components but then you say you're using Tailwind, Styled Components and Emotion which are simply ways of writing CSS differently, not based on pre-built components.

Personally I like using Vanilla Extract which uses TypeScript instead of Sass and then compiles down to CSS so no runtime cost like Styled Components and Emotion.

I use it with Radix UI which has headless components I can then style pretty easily.

If you want purely pre-built components, you could try something like Tamagui which apparently is quite fast too.

https://vanilla-extract.style

https://https://www.radix-ui.com/

https://tamagui.dev/

I'd drop the frameworks altogether. I've been a huge advocate of vanilla web dev for a few years now.

The power of modern CSS and JavaScript mean that any given framework is much more likely to get in your way or omit some amazing new convenience.

I dropped bootstrap from my new projects once I mastered grid and flexbox. Responsive layout is ~15 lines of JavaScript that is infinitely more comprehensible than the declarative crap you typically have to mess with. Conditionally setting grid/flex layout from JS is about as trivial as it gets.

I don't know why most of us are still drowning ourselves in all the non-essential complexity. MDN is the bible and can lead you to salvation.

Also - ChatGPT is pretty damn good at assisting with vanilla web dev.

I have been very satisfied using https://m-docs.org/ It has pre-built components and a bunch of utility classes that allow basic custom styling in the manner of Tailwind so that I rarely write any css myself. It's also framework agnostic and as simple as just including a <link> and <script>.

I agree. There's a lack of quality, comprehensive UI libraries with ready-to-go, composable components. And the ones that do exist are tied to specific languages/frameworks like React.

Reply on news.ycombinator.com