The CSS-in-React Landscape

Many CSS-in-JS libraries, while theoretically framework-agnostic, find their primary use within React projects. This is largely due to React's lack of a built-in styling solution, unlike Vue, Svelte, or Angular. This "bring-your-own" approach offers flexibility but necessitates a styling strategy choice. While plain CSS remains a viable option, CSS-in-JS libraries offer benefits such as:

• Style co-location with components
• Component-scoped styles
• Prop-driven styling variations
• JavaScript integration within CSS
• Theming capabilities

Each library provides unique features, often variations or extensions of the above. Importantly, using JavaScript for style authoring doesn't always mean JavaScript-based style shipping. "Zero runtime" libraries compile styles to CSS during the build process, improving performance.

This overview is supported by Frontend Masters, CSS-Tricks' official learning partner.

Front-End Development Training

Frontend Masters offers comprehensive courses on leading front-end technologies, including advanced React training.

Consider the Intermediate React Course

Before exploring the libraries, note:

• My experience with each library varies; CSS Modules is my most extensive. The demos are basic.
• Corrections and additions are welcome via comments or the contact form.
• The goal is to provide functional code examples for easy reference.

Included Frameworks

• styled-components
• CSS Modules
• Emotion
• Stitches
• vanilla-extract
• JSS
• Linaria
• Styled JSX
• Goober

Library Summaries

styled-components: Extremely popular, known for dynamic styling and prop-based variations. Uses a template literal syntax resembling CSS, though object syntax is also supported. Offers SSR, but isn't "zero runtime."

CSS Modules: Simple, scopes styles and encourages co-location. Its key feature is composition (mixin-like class combinations). It's a build-process-only solution, offering true "zero runtime" capability when CSS is extracted. Works with HMR and is compatible with Sass. Integrated into Next.js.

Emotion: Enables CSS styling with JavaScript, providing style composition, source maps, labels, and testing utilities. Supports both string and object styles. Similar to styled-components but with potential performance differences. Supports SSR but isn't zero-runtime. Glamorous, Glam, and Glamor are deprecated in favor of Emotion.

Stitches: Features a robust Variants API, excellent TypeScript editor integration, theming support, and utility creation. Offers SSR, approaching zero-runtime, but doesn't generate CSS files directly.

vanilla-extract: Primarily an SSR solution; "zero runtime" unless specific runtime features are enabled. Provides excellent TypeScript editor integration, a Variants API, and a Recipes API (similar to Stitches). Supports theming and utility classes via Sprinkles. A strong alternative to the now-deprecated Aphrodite.

JSS: Includes React integration, an extend syntax, and a plugin architecture.

Linaria: A pioneer of "zero runtime" CSS-in-JS, compiling to CSS files but retaining a runtime for dynamic elements. Similar to styled-components in API. Supports Critical CSS.

Styled JSX: A Babel plugin requiring a build process. Uses a <style></style> tag within components for scoping. The lack of nesting can be cumbersome.

Goober: A lightweight (1.25KB) library with a feature set similar to styled-components and Emotion.

Additional Resources

• Shopify's library selection research.
• Facebook's in-development "StyleX" (currently un-open-sourced).
• "Style9," a library aiming to replicate StyleX's features.
• Tailwind CSS (with just-in-time mode) for atomic CSS.
• Styled System, a React-oriented approach to atomic styling.
• Twin, another React-friendly atomic styling solution.
• CSS-in-JS Playground, showcasing various libraries including Fela and Radium.

1. "TypeScript editor experience" refers to TypeScript's code completion capabilities, enhancing developer workflow in editors like VS Code.

The above is the detailed content of The CSS-in-React Landscape. For more information, please follow other related articles on the PHP Chinese website!