One class. Not forty.

mCSS is a modern CSS framework and component library for websites. Real CSS, real markup, zero build step. Built on what browsers can finally do.

Get started View on GitHub

MIT licensed No dependencies It’s just CSS

<button class="bt bt-primarybg-primary-600 px-4 py-3 text-sm font-semibold text-white rounded-md transition duration-200 hover:bg-primary-700 focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95">
  Demo button
</button>

<button class="bg-primary-600 px-4 py-3 text-sm font-semibold text-white rounded-md transition duration-200 hover:bg-primary-700 focus-visible:ring-2 focus-visible:ring-offset-2 active:scale-95">
  Demo button
</button>

characters

↓

<button class="bt bt-primary">
  Demo button
</button>

219 → 54 characters

<link rel="stylesheet" href="mcss.min.css">

Copied!

That’s the install. Download dist/mcss.min.css or copy the source files. Every modern browser understands them as-is: no compiler, no config, no node_modules.

~21 KB min+gzip
0 dependencies
Baseline 2024

Philosophy

Made for humans who write CSS

CSS isn’t broken, and you don’t need to be protected from it. mCSS takes care of the tedious parts (resets, tokens, a sane cascade) and gets out of the way.

It’s actual CSS
No pseudo-syntax, no new mental model. If you know CSS, you already know mCSS, and everything you learn here works everywhere, forever.
The cascade is a feature
Native @layer keeps specificity conflicts from ever starting: anything you write outside mCSS’s layers wins automatically. No !important, no fighting your framework.
Markup you can read
One semantic class per element. Your HTML describes what things are, and six months from now you’ll still understand it.

Modern CSS

Built on what browsers can do now

The last few years quietly made CSS spectacular. mCSS is what a framework looks like when it’s designed after that happened.

@layer
The whole architecture. Import order stops mattering, and your overrides always win.
Baseline Widely available
light-dark()
Dark mode is one token file, not a parallel stylesheet.
Flip this card’s color-scheme Baseline 2024
:has() & nesting
Components with zero specificity hacks, written the way you’d write them yourself.
Baseline Widely available
@scope
Prose styling that can’t leak into your components.
Baseline 2025
Scroll-driven animations
The reading progress bar on this very site: pure CSS in modern browsers, a graceful fallback elsewhere.
Limited availability
Three-tier tokens
Raw scales → semantic theme → per-component properties. Change one value; the system follows.
Baseline Widely available

Every technique is documented on the blog. The framework practices what it teaches.

Read the blog →

Theming

Theme with variables, not variants

Every color, size, and radius flows from one token file. Edit it and the whole system follows, light and dark.

DefaultWireframeSunset

You’re invited!

Sam turns 30 · Saturday 4pm

Cake, candles, and questionable karaoke. No gifts, just bring yourself.

EmailWe’ll never share it.Please fill out this field correctly.

/* settings.ui.css defaults (excerpt) */
:root {
  --heading-font: var(--display);
  --text: ui-sans-serif, system-ui, sans-serif;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-color: light-dark(#23282e, #d6dbe1);
  --card-bg-color: light-dark(#edeef1, #353c45);
  --card-border-radius: 8px;
  --card-shadow: var(--shadow-md);
  --bt-primary-background-color: #0284c7;
  --bt-primary-background-color-hover: #0ea5e9;
  --bt-primary-border-color: #0284c7;
  --bt-primary-border-color-hover: #0284c7;
  --bt-border-radius: 8px;
  --input-border-radius: 5px;
  --link-color: light-dark(#0284c7, #38bdf8);
}

/* a wireframe theme: the entire diff */
:root {
  --heading-font: ui-rounded, "Arial Rounded MT Bold", Calibri, sans-serif;
  --text-color: light-dark(#404040, #d4d4d4);
  --card-bg-color: light-dark(#f5f5f5, #171717);
  --card-border-radius: 0;
  --card-shadow: none;
  --bt-primary-background-color: #525252;
  --bt-primary-background-color-hover: #737373;
  --bt-primary-border-color: #525252;
  --bt-primary-border-color-hover: #525252;
  --bt-border-radius: 0;
  --input-border-radius: 0;
  --link-color: light-dark(#525252, #a3a3a3);
}

/* sunset: the entire diff */
:root {
  --heading-font: "Iowan Old Style", Georgia, serif;
  --text: Georgia, "Times New Roman", serif;
  --text-md: 1.05rem;
  --text-lg: 1.3rem;
  --text-color: light-dark(#431407, #ffedd5);
  --card-bg-color: light-dark(#fef9c3, #431407);
  --card-border-radius: 16px;
  --card-shadow: 0 8px 24px rgb(234 88 12 / 0.25);
  --bt-primary-background-color: #ea580c;
  --bt-primary-background-color-hover: #f97316;
  --bt-primary-border-color: #ea580c;
  --bt-primary-border-color-hover: #ea580c;
  --bt-border-radius: 1e5px;
  --input-border-radius: 1e5px;
  --link-color: light-dark(#c2410c, #fb923c);
}

Show the diff

/* settings.ui.css defaults (excerpt) */
:root {
  --heading-font: var(--display);
  --text: ui-sans-serif, system-ui, sans-serif;
  --text-md: 1rem;
  --text-lg: 1.2rem;
  --text-color: light-dark(#23282e, #d6dbe1);
  --card-bg-color: light-dark(#edeef1, #353c45);
  --card-border-radius: 8px;
  --card-shadow: var(--shadow-md);
  --bt-primary-background-color: #0284c7;
  --bt-primary-background-color-hover: #0ea5e9;
  --bt-primary-border-color: #0284c7;
  --bt-primary-border-color-hover: #0284c7;
  --bt-border-radius: 8px;
  --input-border-radius: 5px;
  --link-color: light-dark(#0284c7, #38bdf8);
}

/* a wireframe theme: the entire diff */
:root {
  --heading-font: ui-rounded, "Arial Rounded MT Bold", Calibri, sans-serif;
  --text-color: light-dark(#404040, #d4d4d4);
  --card-bg-color: light-dark(#f5f5f5, #171717);
  --card-border-radius: 0;
  --card-shadow: none;
  --bt-primary-background-color: #525252;
  --bt-primary-background-color-hover: #737373;
  --bt-primary-border-color: #525252;
  --bt-primary-border-color-hover: #525252;
  --bt-border-radius: 0;
  --input-border-radius: 0;
  --link-color: light-dark(#525252, #a3a3a3);
}

/* sunset: the entire diff */
:root {
  --heading-font: "Iowan Old Style", Georgia, serif;
  --text: Georgia, "Times New Roman", serif;
  --text-md: 1.05rem;
  --text-lg: 1.3rem;
  --text-color: light-dark(#431407, #ffedd5);
  --card-bg-color: light-dark(#fef9c3, #431407);
  --card-border-radius: 16px;
  --card-shadow: 0 8px 24px rgb(234 88 12 / 0.25);
  --bt-primary-background-color: #ea580c;
  --bt-primary-background-color-hover: #f97316;
  --bt-primary-border-color: #ea580c;
  --bt-primary-border-color-hover: #ea580c;
  --bt-border-radius: 1e5px;
  --input-border-radius: 1e5px;
  --link-color: light-dark(#c2410c, #fb923c);
}

Radio buttons and :has(): this demo runs on zero JavaScript.

Component library

Components for real websites

Header to footer: heroes, sections, feature grids, pricing, testimonials, FAQs, forms, article lists, pagination. Built for marketing sites, blogs, and docs. Ships as plain HTML or Astro, whichever you write.

Field notes
Issue #12
A monthly dispatch on modern CSS, real-world markup, and the odd bird photo.
CardZero JS
Card component documentation
Indie
MIT
$0/ forever
Everything, for everyone.
- All components
- Light & dark themes
- MIT license
Copy the files
PricingZero JS
Pricing component documentation
I stopped fighting my framework. There was nothing left to fight.
AL
Ada LindgrenFront-end lead
TestimonialZero JS
Testimonial component documentation
Do I need a build step?
No. Link one file and start writing HTML.
Can I override anything?
Yes: unlayered CSS always beats the framework.
FAQZero JS
FAQ component documentation
Work emailOne email a month, no noise.Please fill out this field correctly.
Form fieldZero JS
Field component documentation
- 1
- 3
- 4
- 5
- 9
PaginationZero JS
Pagination component documentation

Nearly everything is zero-JavaScript. The mobile menu and the dismissible banner are the exceptions, and they’re tiny.

Start from a whole site, not a blank file.

This site (docs, blog, the page you’re reading) is built from mCSS.

Browse the components →

Ownership

You own the code

mCSS isn’t a dependency. It’s a starting point. Copy the files into your project and edit them like the code you wrote yourself, because now it is. Styling disagreements end with you changing a line, not filing an issue.

MIT licensed. Versioned releases when you want to pull updates. No lock-in, because there’s nothing to be locked into.

MIT LicenseUse it anywhere. Keep it forever.
Versioned releasesPull updates when you choose to.
One token fileEdit settings.tokens.css, not node_modules.

Give your CSS its cascade back

Read the methodology, copy the files, ship something.

Get started in 10 mn Star on GitHub

Prefer email? Join the mailing list: new components and modern-CSS write-ups, no noise.

One class. Not forty.

Made for humans who write CSS

It’s actual CSS

The cascade is a feature

Markup you can read

Built on what browsers can do now

`@layer`

`light-dark()`

`:has()` & nesting

`@scope`

Scroll-driven animations

Three-tier tokens

Theme with variables, not variants

You’re invited!

Components for real websites

Field notes

Indie

Start from a whole site, not a blank file.

You own the code

Give your CSS its cascade back

One class. Not forty.

It’s actual CSS

The cascade is a feature

Markup you can read

@layer

light-dark()

:has() & nesting

@scope

Scroll-driven animations

Three-tier tokens

Start from a whole site, not a blank file.

`@layer`

`light-dark()`

`:has()` & nesting

`@scope`