Mode CSS [µ*]

A classless, cascade-first CSS layer. Style semantic HTML directly — minimal selectors [µ*], no utility-class soup, a small and reusable footprint. No build. Just minify

Because to get a real micro DOM you need a micro CSS too.

Goals

How it works

This very page is built with Mode CSS. The layout, header, navigation, cards, forms and footer you are looking at come straight from the base stylesheet — semantic HTML plus a few µ-attributes. Only the colors and a few decorative touches live in a separate theme file.

The CDN is for prototyping; npm is for shipping.

page.html

<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@microdom/mode.css@1/dist/mode.min.css">

terminal

npm install @microdom/mode.css

app.js

import "@microdom/mode.css";      // flat, readable build
import "@microdom/mode.css/min";  // minified build

page.html

<link rel="stylesheet" href="mode.css">    <!-- base layout + defaults -->
<link rel="stylesheet" href="custom.css">  <!-- your theme -->

Write plain, semantic markup. The cascade does the styling — no class on every element.

page.html

<main>
  <section µ-grid="3-col">
    <article>
      <h3>Readable by default</h3>
      <p>Just semantic HTML — no classes.</p>
    </article>
    <!-- ... More Articles -->
  </section>
</main>

The attribute vocabulary

Layout that the cascade can't express alone is opted into with an exact set of µ-attributes — no class soup, just intent.

Tokens are the theme

The base ships a small set of design tokens — typography scale, spacing rhythm, a neutral palette and the master layout widths. Re-skinning the whole site is mostly a matter of overriding them in custom.css.

custom.css

:root {
  --color-bg:     #0b0d12;   /* dark steel */
  --color-text:   #d8dee8;
  --color-accent: #ff7a18;   /* molten ember */
  --radius:       12px;
  --max-width:    1080px;
}