FCSS 2 gives utility CSS classes real CSS property names and purges them at build time

FCSS 2, a utility CSS library whose class names are the actual CSS properties and values they apply, has drawn attention after surfacing on the Hacker News front page. According to the project's README on GitHub, each class maps to exactly one declaration — padding--24 means padding: 24px and nothing else — and because the names are the real CSS ones (background-color--blue, not bg-blue), developers who already know CSS have nothing new to memorise.

How the classes work

Class names follow a property--value pattern, with states and conditions folded into the name itself. The README gives color--red:hover for hover styles, display--block:aria-expanded:true to react to an ARIA attribute, and md-display--none for a responsive rule. Breakpoints are mobile-first, using min-width media queries at 576, 768, 992, 1200 and 1400 px for the sm, md, lg, xl and xxl prefixes, and they can be combined with pseudo variants such as md-color--red:hover.

Colours are backed by custom properties — for example --fcss-color-blue — defined in a root stylesheet, so a site can be re-themed without renaming classes. A companion CLI can explain what any given class does or list the ones available.

No runtime, but a purge step you cannot skip

FCSS ships plain CSS with no JavaScript runtime, and that comes with a size trade-off: the core package contains every class in every state and breakpoint, roughly 28 MB of CSS. A purge step, normally a framework integration, scans the project's source and cuts that down to the few kilobytes actually used. The README is blunt that shipping the full file to production is not an option.

The library supports Vite 5–8 (covering React, Preact, Solid and vanilla JS), Next.js 14–16, Astro 7 and Angular 17–22, plus a PostCSS plugin for other bundlers — the same plugin the official integrations rely on under the hood — and a plain CDN link for prototypes. It needs Node.js 20.19 or newer, or Bun, and works with npm, pnpm, yarn or bun.

A couple of integrations have quirks. Next.js 16 builds with Turbopack by default while FCSS purges through webpack, so production builds need next build --webpack. On Angular, a schematic wires the purge into the build script, and running ng build on its own skips it.

Rough edges to know about

The scanner locates used classes by reading HTML, JavaScript, TypeScript, JSX/TSX, Angular templates and .astro files. Vue and Svelte files are not scanned yet, so a class that appears only in a .vue or .svelte file will be removed from the output; support for both is on the roadmap.

The purge also cannot execute code, only read it, so class names must be written out statically. A class inside a ternary is found; a name assembled with template-literal interpolation at runtime is not, and has to go into a safelist instead.

Why it matters

Utility-first CSS has usually meant learning a framework's invented shorthand on top of CSS itself. FCSS 2 bets the other way: keep the vocabulary identical to the language, make classes portable across frameworks or no framework at all, and lean on the build to keep the payload small. For teams that find utility shorthand a barrier, that removes a layer of memorisation and keeps styles readable for anyone with plain CSS knowledge. The costs are equally clear — the whole approach depends on the purge step behaving correctly, several framework builds need special handling, and Vue and Svelte projects are effectively excluded until file scanning lands for them.