Thoughts on CSS

[tlgimenes]

Hi folks,

I've been on the JS community for a while now and although we have come a long way from the early days of bundlers like browserify and gulp I still feel like we don't have an ideal solution when writing JS and CSS and I'd like to hear/share these toughs with you. In 2023, I'd expect my framework to give me out of the box:

1. Optimal CSS: only used classes on that page are actually shipped to the browser
2. Streaming support: my CSS stack doesn't block the html's body from being shipped to the browser
3. No build step: I write my styles and they are autoprexied (vendored) automatically.
4. No need for global builds: I'd like to import { Component } from 'url' and this component's styles are automatically incorporated into my html/style sheet
5. No JavaScript processing for generating CSS on the browser: my css solution does not include extra work on the browser (it does not contribute to the app's total blocking time)

I really liked fresh and deno's approach to web development and I really feel we are really close to having a nice contender here, however, I can not find a good solution for CSS for fresh.

Currently, the most widespread solution is to use fresh + twind. As I said in this issue Twind really harms performance, breaking the point 5 of my ideal stack. Also, another important issue with twind is the necessity of rendering the whole html to generate the CSS sheet, removing any streaming possibilities (as far as I know of). Finally, having to have a twind.config.js means I can not only import any component and expect it to work, making point 4 also be a liability for twind.

Researching the topic, I came across this discussion proposing we use tailwind directly. This is nice because it enables streaming and removes all JavaScript from the frontend. Also, another nice aspect is that it shares the same CSS file across pages, making navigations between pages of an MPA (multiple page application) faster. The downside of this approach is shipping more CSS than needed to the browser, and the need to perform a global build, breaking the points 3 and 4.

Looking on other solutions, css-in-js seems always to ship some kind of runtime to the browser (impacting on total blocking time). Postcss based solutions seems to always require some kind of global build step, which makes us have a global build step.

For me, the best tradeoff between dev XP, performance and simplicity is this fresh+tailwind template, but I'd like to hear from you. Do you also think we should get these 5 features from a CSS framework in 2023? Are you also struggling to find a stack that pleases both users and developers? Do you agree on the fresh+tailwind approach or you have a better option?

cheers!