Better CSS

[ghost]

Great to see that you're on innovating on using "normal" JS syntax to simplify UIs for both LLMs and humans.

Scoped CSS in Svelte was probably the last step function improvement in CSS at the framework level. Little innovation is happening there in frameworks.

1. As a component, how do I allow consumers to overwrite styles? Can I control where styles go (e.g. children, grand-children)?
2. As a component, how do I specify which styles consumers can overwrite (i.e. my CSS API)?
3. How do I verify correctness (e.g. via TypeScript and ESLint or CSS static analysis) of styles?
4. How do I share common styles and groups of styles across similar components? Is the CSS minimal (i.e. tree-shaken)?
5. How do I merge/mix with high expressivity (i.e. select and order things; access to all CSS features; don't break encapsulation by accident)?

Tokenami has some interesting ideas & patterns for this. IMHO thoroughly underrated because it's a late comer. Tailwind has a diverse though non-cohesive strategies like @apply and user-land solutions like tailwind-merge, but they're difficult to statically analyze. Stylex address some "CSS at scale" problems (i.e. good for humans and LLMs), but I admittedly don't feel it.

As you raise the bar for frameworks, I'm excited to see ideas from you and others for teaching LLMs and humans to be better styling collaborators.