{
  "id": 3641290,
  "title": "Beyond CSS-in-JS: From Element Styles To Component Themes",
  "url": "https://urgent.news/2026/08/27/beyond-css-in-js-from-element-styles-to-component-themes",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-27T01:45:42.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/omnidev/beyond-css-in-js-from-element-styles-to-component-themes-eaj"
  },
  "original_language": "en",
  "account": "This article discusses the evolution of Fluentic Style, a design system that aims to address the challenges of styling in React applications. The core concept began with the desire to implement React Native-style composition in React web, allowing for easy style composition using a base style, active state styles, and prop styles. The initial implementation looked like this:\n\ndiv css = { [ base, active && selected, props.css ] }\n\nHowever, as Fluentic evolved, it became apparent that the problem was not solely about CSS-in-JS or build-time extraction. The real challenge was the need for a better pattern for component-level styling and theming that could move from app-wide defaults down to specific components.\n\nThe key question emerged: Can a styling system cover the everyday path from styling an individual element, through reusable components, component themes, and app-wide themes, while maintaining usability in both debugging and production extraction?\n\nThe article emphasizes that CSS-in-JS, while useful, only solves one aspect of styling. Real app styling involves multiple layers: element styles, component styles, component variants, component themes, and app-wide themes. Many existing styling approaches excel in specific areas, such as quick element styles, app-wide tokens, utility classes, local CSS files, runtime dynamic values, extracted CSS, or a combination of these. However, in practice, developers often require a unified system to handle all these layers seamlessly.\n\nThe article then introduces the concept of starting with one element. For simple cases, Fluentic allows for straightforward style attachment to a single element:\n\nconst saveButton = style ({\nborderRadius: 8,\npadding: \"8px 12px\",\n});\n\nbutton css = { saveButton }\n\nTo handle hover, media, or state styles, the style can be extended:\n\nconst saveButton = style ({\nborderRadius: 8,\npadding: \"8px 12px\",\n}).hover({\nbackgroundColor: \"#f3f4f6\",\n});\n\nbutton css = { saveButton }\n\nFor utility-class authoring, Fluentic also offers flexibility, allowing developers to combine styles using a utility-class approach:\n\nconst saveButton = cx(\ninline-flex,\nitems-center,\nrounded-md,\npx-3,\npy-2,\n).hover({\nbg-slate-100,\n});\n\nbutton css = { saveButton }\n\nThis approach maintains simplicity for styling individual elements while providing more advanced options for reusable components and themes. The article concludes by highlighting Fluentic's goal of seamlessly integrating these different styling layers, from simple element styles to complex component themes and app-wide themes, without isolating each layer into separate systems.",
  "summary": "This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluentic Style . I started Fluentic Style with a small idea: I wanted React Native-style composition in React web. < View style = { [ base , active && activeStyle , props . style ] } /> That kind of style composition always felt practical to me. You have a…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "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."
}