Hacker News Reader

Comment by dminik | Hacker News Reader

I reread the conclusion. I apologize for jumping to conclusions so fast but ...

You specify like 4 approaches:

1. Tailwind - apparently awful 2. Regular stylesheets - also not good 3. Inline Styles - some flaws 4. CSS-in-JS - minimal flaws when using vanilla-extract

Reading through the article, my first thought was that you really like vanilla-extract. When I got to the conclusion section, and the first line is "I like vanilla-extract" I wrote the comment.

Nonetheless, even after finishing that section, without knowing better, I would assume that vanilla-extract is what I should be looking at further.

View on HN

I do think you should look at it further! It's a great library, though I can see why people won't like it for the reasons I mentioned in the article (i.e. having to build and enforce your own constants system). If you are going to use something like Tailwind, you're already okay with putting styles in Javascript and adding a bundler plugin, the two main "leaps" required to use something like vanilla-extract.

Since the style sheets are extracted into CSS and do not contribute to JS bundle size, I'm not sure visceral CSS-in-JS reaction is justified when it comes to vanilla-extract. Tailwind is still basically CSS-in-JS, but more of a hybrid of CSS-in-JS and CSS-in-JSON. Could you elaborate on your frustrations with CSS-in-JS as it pertains to vanilla-extract, the one CSS-in-JS library I recommend?

This is subjective but the DX of writing CSS in JS object syntax is absolutely miserable. Here's an example from the website:

    export const myStyle = style({
      display: 'flex',
      paddingTop: '3px'
    });

I would much (much!) rather write normal CSS and have some build process extract the class name for me, like with CSS modules: https://github.com/css-modules/css-modules

vanilla-extract has zero runtime impact, right? I personally prefer using CSS modules (by a lot) but I don't see a huge difference between the two.

Reply on news.ycombinator.com