How to Choose the Right CSS Strategy for a React Component Library

Background

When a codebase is shared across projects, a component library avoids copy‑paste. In React there are three main styling categories: regular CSS (including preprocessors), CSS‑in‑JS, and utility‑class frameworks such as Tailwind. This article evaluates the options from the perspective of a component‑library author.

CSS‑JS Association Methods

Three ways to associate CSS with JavaScript in a component library:

Style‑Logic Separation – CSS files are emitted as separate assets and are not imported by the component code. Consumers must import the CSS bundle manually. Examples: Ant Design, Zent.

Style‑Logic Combination – CSS is bundled together with the component’s JavaScript. Two implementations:

Write CSS inside JavaScript (CSS‑in‑JS) using libraries such as styled‑components, Emotion, MUI, Mantine.

Import regular CSS files and let bundlers (e.g., webpack + style‑loader, rollup + rollup-plugin‑styles) inject them into the JS bundle. Libraries: react‑mobile‑picker, Angular Material.

Style‑Logic Association – The component imports CSS files, but the final package keeps CSS as separate files while preserving the import statements. Examples: Semi Design, React Spectrum, Ant Design Mobile 5.0.

Pros and Cons

Separation – Broad compatibility, no runtime overhead, but requires manual CSS imports and complex on‑demand loading.

Combination (CSS‑in‑JS) – No separate import, built‑in on‑demand loading, but adds a runtime that increases bundle size and may affect performance; SSR support varies (Emotion provides helpers, others need explicit collection).

Combination (CSS bundled into JS) – Simple setup, works with standard bundlers, but often lacks SSR support unless a loader such as isomorphic‑style‑loader is used.

Naming‑Conflict Solutions

Component libraries must avoid selector collisions. Common strategies:

Naming conventions – Adopt BEM or a project‑wide prefix. Requires discipline.

CSS Modules – Generates scoped class names at build time. Example transformation: .test { color: red; } becomes ._abcd12 { color: red; } CSS‑in‑JS – Runtime‑generated class names (e.g., Emotion) avoid collisions without extra tooling.

Considerations

CSS Modules need build‑time support; consumers must have compatible loaders.

Generated class names can be unstable, making external overrides difficult.

Selection Guidance

For a library intended to be used across multiple frameworks, Style‑Logic Separation is safest because a single CSS bundle can be shared. If the library targets only React, a runtime CSS‑in‑JS solution (e.g., styled‑components or Emotion) offers ergonomic development and built‑in on‑demand loading, provided the added runtime cost is acceptable.

When server‑side rendering (SSR) is required, ensure the chosen solution provides an extraction API. Emotion offers extractCritical helpers; isomorphic‑style‑loader can collect styles from bundled CSS.

For naming, a strict convention works for UI‑focused libraries with stable teams. For business‑driven libraries with many contributors, prefer CSS Modules or zero‑runtime CSS‑in‑JS (e.g., vanilla‑extract) to guarantee isolation.

Technical Comparison Summary

Development complexity : Separation – medium; Combination (CSS‑in‑JS) – low; Combination (bundled CSS) – low.

Output : Separation – JS + CSS files; Combination (CSS‑in‑JS) – JS only; Combination (bundled CSS) – JS (with optional CSS files).

Import style : Separation – separate JS and CSS imports; Combination – import JS only; Association – import JS only, CSS imported internally.

On‑demand loading : Separation – needs extra tooling; Combination – supported; Association – supported.

Runtime impact : Separation – none; Combination (CSS‑in‑JS) – runtime may increase bundle size; Combination (bundled CSS) – none.

SSR support : Separation – straightforward; Combination (CSS‑in‑JS) – requires helpers; Combination (bundled CSS) – requires isomorphic‑style‑loader or similar.

References

styled‑components – https://styled-components.com/

Emotion – https://emotion.sh/

MUI – https://mui.com/

Mantine – https://mantine.dev/

react‑mobile‑picker – https://github.com/adcentury/react-mobile-picker

Angular Material – https://material.angular.io/

Semi Design – https://semi.design/

React Spectrum – https://react-spectrum.adobe.com/react-spectrum/index.html

Ant Design Mobile 5.0 – https://mobile.ant.design/

babel‑plugin‑import – https://github.com/umijs/babel-plugin-import

isomorphic‑style‑loader – https://github.com/kriasoft/isomorphic-style-loader

vanilla‑extract – https://vanilla-extract.style/