if so, I shall set the dining table without knives.
there is no spoon!
( https://en.wikipedia.org/wiki/Dining_philosophers_problem )
For me, back in the JQuery days, the problem was always globally-scoped JS/DOM, rather than CSS. The big revolution was simply co-locating/importing styles in JS modules during the compile step, which works surprisingly well even outside of any framework.
Just using vanilla DOM or a small wrapper around web components for connectedCallback/disconnectedCallback logic is refreshingly simple. It’s quite sad that most SSR frameworks don’t allow this sort of approach, and lock you in to a specific front-end library.
Rather than using a fork, you could completely remove the “style sheets at runtime” part by using a CSS in TypeScript tool which builds everything and produces plain CSS files and CSS variables.
There are at least four main benefit:
- Can enforce design tokens (colours, spacing, whatever) with type safety
- The previous point helps enforce and encourage design consistency; I have lost count of the amount of times I’ve seen lazy “just append some more unmaintainable mess” at the bottom of CSS files
- CSS is built at build time which is what you are already familiar with if you’ve used a CSS preprocessor before
- Smaller file sizes sent to the users browser
Oh and one final thing: vanilla-extract is not just for React, its standalone meaning you can use it even with something entirely server side if you wished.
> Your app has styled-components. That's not changing today. But it doesn't have to be slow while you figure out tomorrow.
It always was. You decided to make it slow and were fine with it, not sure why that's suddenly unacceptable.
RedShift1•1h ago
mootoday•1h ago
jeswin•1h ago
I switched to web components for all my personal work.
a_humean•1h ago
jeswin•22m ago
But more importantly, we need to explore different paths to figure out what doesn't work. Things which seem like bad ideas in hindsight aren't bad experiments to run - otherwise we will all learn nothing.
breakingcups•1h ago
"The React team themselves have made it clear: runtime CSS injection will always be slower than statically extracted styles. They recommend using <link rel="stylesheet"> for static styles and inline styles for dynamic values. That's the future."
I thought this lesson was already widely learned since the jQuery days.
Perz1val•1h ago