CSS-in-JS is a styling technique that uses JavaScript to define styles and generate or manage CSS class names.
CSS-in-JS uses JavaScript to manufacture guaranteed-unique class names instead of relying on CSS class-naming conventions. It addresses naming conflicts in large, modular projects. section 9.2.2
Evaluate the technique against these practical constraints:
Use it mainly in applications rendered completely by a JavaScript framework, especially single-page applications. section 9.2.2
Expect tradeoffs: adopting CSS-in-JS can lock a project into a particular JavaScript toolset or framework. section 9.2.2
Recognize established implementations including Styled Components, vanilla-extract, and CSS Modules. section 9.2.2
How CSS in Depth, Second Edition covers it
How deep it goes
Defines automatic class-name generation and explains tradeoffs, but stops short of implementation details or code.
Examples
Names Styled Components, vanilla-extract, and CSS Modules as representative implementations.
What it assumes
Assumes JavaScript-framework rendering and awareness of modular CSS naming conventions.
What you can do after
Evaluate whether automated class-name generation suits a framework-rendered application and its toolset constraints.
How it connects
Connects CSS-in-JS with modular CSS, JavaScript frameworks, React, Webpack, and single-page applications.
JavaScriptuses · JavaScript is a high-level, dynamically typed, multi-paradigm programming language standardized as ECMAScript and used for web and general-purpose programming.
styled-componentsincludes · styled-components is a JavaScript library for defining component-scoped CSS through framework-integrated components and generated styles.
CSS Modulesuses · CSS Modules is a build-time CSS scoping technique that transforms class names into locally unique names to prevent naming collisions.
CSScontrasts with · CSS, or Cascading Style Sheets, is a stylesheet language for specifying the presentation and layout of structured documents and user interfaces.
This explainer was generated by Manning's knowledge graph from the text of CSS in Depth, Second Edition. The section links point to the parts of the book it draws on.
