CSS-in-JS
CSS-in-JS is a styling technique that defines, composes, or generates CSS styles from JavaScript or TypeScript code.
React in Depth
CSS-in-JS is a technique for defining, composing, or generating CSS styles from JavaScript code.
- How it is used
- Keeps React component styles closer to markup and logic when separate CSS creates coordination problems.
- How deep it goes
- Explains the motivation and compares styling approaches and failure modes, without showing a CSS-in-JS implementation in the supplied excerpts.
- Examples
- Uses a Button.js/button.css mismatch, a .group class collision, and a JavaScript width value to illustrate styling friction.
- What you can do after
- Evaluate/understand it when choosing among plain CSS, CSS Modules, and styled-components for a React project.
CSS in Depth, Second Edition
CSS-in-JS is a styling technique that uses JavaScript to define styles and generate or manage CSS class names.
- How it is used
- Addresses class-name conflicts and naming rigor in large modular CSS projects, particularly single-page applications.
- 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 you can do after
- Evaluate whether automated class-name generation suits a framework-rendered application and its toolset constraints.
Related concepts
- 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.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.