CSS Modules and CSS-in-JS

Naming conventions rely on discipline; scoping tools make collisions impossible. A CSS Module is an ordinary stylesheet whose class names the build tool renames to unique hashes and exports to JavaScript. Vite 25,978 , Next.js 10,514 and webpack 3,824 's css-loader treat any file ending in .module.css this way, so the card from CSS Architecture needs no BEM prefixes:

Card.module.css: short local class namesCSS

.card { width: 240px; padding: 16px; border: 1px solid #cfd8dc; border-radius: 8px; }
.featured { composes: card; border-color: #1565c0; }
.title { margin: 0 0 4px; }

Card.jsx: importing the generated class namesJSX

import styles from './Card.module.css';
export const Card = ({ title, featured }) => (
  <article className={featured ? styles.featured : styles.card}>
    <h3 className={styles.title}>{title}</h3>
  </article>
);

Running the stylesheet through Lightning CSS (lightningcss --css-modules), the Rust compiler Vite uses for minification, shows what reaches the browser. composes emits no CSS; the exported name for featured simply contains both classes.

Output of 99

.V5PT5q_card { border: 1px solid #cfd8dc; border-radius: 8px; width: 240px; padding: 16px; }
.V5PT5q_featured { border-color: #1565c0; }
.V5PT5q_title { margin: 0 0 4px; }
exports: featured -> "V5PT5q_featured V5PT5q_card", title -> "V5PT5q_title"

CSS-in-JS goes further and writes styles inside JavaScript, so they can read props and theme values. The libraries split on when the CSS is produced.

Runtime CSS-in-JS generates styles in the browser; zero-runtime libraries extract a static file at build time

CSS-in-JS libraries, all MIT licensed
Library	CSS generated	Version (Sept 2026)	GitHub 29 stars
styled-components 247,596	Runtime, tagged templates	6.5.3	41.1k
Emotion 643,768	Runtime, css prop or styled	11.14.0	18.0k
vanilla-extract	Build time, .css.ts files	1.21.2	10.4k
StyleX (Meta)	Build time, atomic classes	0.19.0	10.3k
Panda CSS (Chakra 305,369 team)	Build time, atomic classes and recipes	1.12.1	6.2k

Runtime libraries hash styles during rendering, ship their engine in your bundle and fit poorly with React 7,897 Server Components; in March 2025 the styled-components maintainer put it into maintenance mode and advised against runtime CSS-in-JS for new projects. Zero-runtime tools keep the authoring model but emit static CSS: StyleX's atomic classes shrank facebook.com's CSS from tens of megabytes to a couple of hundred kilobytes.

MENU