EffCSS hydration: server work, client trust, zero waste

EffCSS introduces a novel approach to the CSS-in-JS ecosystem by separating the logical name of a style from its corresponding CSS selector. Currently, the ecosystem is divided into two main approaches: Runtime CSS-in-JS (Emotion, styled-components) and Zero-runtime CSS-in-JS (Linaria, Vanilla Extract). Both approaches tie the selector to the style in some way, forcing recomputation and limiting the options for dynamic styles.

Runtime CSS-in-JS keeps JavaScript on the client for full dynamism, but the selector is a hash of the style, limiting the ability to retrieve existing selectors without rebuilding and re-hashing. Zero-runtime CSS-in-JS compiles styles into static .css files at build time, avoiding recomputation but limiting the ability to create dynamic styles.

EffCSS takes a different approach by decoupling the selector from the CSS. It generates the selector from a namespace/ordinal rather than from the CSS string, maintaining a separate dictionary mapping logical names to selectors. This decoupling allows for independent serialization and storage of styles and metadata, enabling efficient server-side rendering and client-side hydration while maintaining the flexibility to create dynamic styles.

The clear separation of concerns between logical names and CSS selectors addresses the core issue of tying styles to their identity and offers a more flexible and efficient approach to styling in web development.