Why CSS-in-JS Is Revolutionizing Modern Frontend Development

Introduction

Years ago writing HTML with JavaScript was considered absurd, but today frameworks like React, Vue and Angular have replaced traditional web development, and CSS‑in‑JS is emerging as a bold new approach.

CSS Overview

CSS (Cascading Style Sheets) is a language for styling structured documents, defined by the W3C. The latest stable version is CSS 2.1, while most browsers support CSS 3 and CSS 4 is under development.

CSS Modules and Standardisation

The W3C split CSS into independent modules (the "Beijing doctrine") to speed up standardisation. Some modules are Recommendations, others are drafts, and new modules are added as needs arise.

CSS Version Timeline

1996 – CSS 1.0

1998 – CSS 2.0

2011 – CSS 2.1

Today – CSS 3 extends CSS 2.1

CSS Design Patterns

OOCSS (Object Oriented CSS)

SMACSS (Scalable and Modular Architecture for CSS)

BEM (Block‑Element‑Modifier)

ITCSS (Inverted Triangle CSS)

Atomic CSS

These patterns aim to reduce selector conflicts, improve structure, eliminate redundancy, enable reuse, and increase readability.

Atomic CSS History

2013‑06‑10 – Brad Frost publishes Atomic Design article.

2014‑10‑02 – atomizer project created.

2015‑01‑08 – "Atomic Design: The Book" released.

2017‑10‑06 – tailwindcss created.

CSS Mathematical Functions

Basic arithmetic: calc() Comparison: min(), max(), clamp() Stepping: round(), mod(), rem() Trigonometric: sin(), cos(), tan(), asin(), acos(), atan(), atan2() Exponential: pow(), sqrt(), hypot(), log(), exp() In practice calc() is the most used function.

CSS Houdini

Houdini is a set of low‑level APIs that expose the CSS engine, allowing developers to extend styling and layout by writing JavaScript that the browser can parse as CSS.

It can be seen as an advanced version of CSS‑in‑JS, enabling real‑time extensions beyond what pure CSS can provide.

CSS Preprocessors

Preprocessors add features not available in native CSS, such as nesting and variables.

PostCSS (2013)

Less (2009)

SASS (2006)

Stylus (2010)

PostCSS leads in downloads thanks to its rich plugin ecosystem.

CSS‑in‑JS Overview

CSS‑in‑JS uses JavaScript to generate and inject CSS at runtime, offering component‑level styling, full access to JS features, automatic selector isolation, dynamic theming, and TypeScript support.

Drawbacks include a learning curve and additional runtime dependencies.

Popular CSS‑in‑JS Libraries

Run‑Time (JIT)

emotion

jss

styled‑components

aphrodite

radium

glamor

Build‑Time (AOT)

Linaria

These libraries show steady growth in NPM downloads, indicating strong community adoption.

Industry Adoption

Google

Facebook

Reddit

Patreon

Target

Atlassian

Vogue

GitHub

Coinbase

Chrome DevTools Support

Chrome 85 improves the Styles pane to edit CSS created via the CSS Object Model (CSSOM) API and supports Constructable Stylesheets for dynamic styles.

Future Outlook

CSS‑in‑JS does not replace CSS but complements it, offering greater flexibility for component‑centric applications. The author’s own React‑UWP library uses CSS‑in‑JS to achieve modular theming and state synchronization, and expects more best‑practice examples to emerge.