{
  "id": 304261,
  "title": "EffCSS hydration: server work, client trust, zero waste",
  "url": "https://urgent.news/2026/08/08/effcss-hydration-server-work-client-trust-zero-waste",
  "topic": "culture",
  "section": "Culture",
  "published": "2026-08-08T10:27:17.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/effnd/effcss-hydration-server-work-client-trust-zero-waste-318m"
  },
  "original_language": "en",
  "account": "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.\n\nRuntime 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.\n\nEffCSS 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.",
  "summary": "Currently the CSS-in-JS ecosystem is split into two camps: Runtime CSS-in-JS (Emotion, styled-components) keeps JS on the client for full dynamism. At hydration it reuses the SSR-injected styles, so the CSSOM isn't duplicated but JS code still runs. Zero-runtime (Linaria, Vanilla Extract, Panda CSS) removes runtime entirely: styles become static .css files at build time. The price is equally…",
  "key_points": [
    "EffCSS separates logical names from CSS selectors, decoupling them from CSS strings.",
    "Decoupling allows independent serialization and storage of styles and metadata.",
    "Enables efficient server-side rendering and client-side hydration with dynamic styles."
  ],
  "editors_take": null,
  "illustration": "https://urgent.news/ill/304261.png",
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}