Super small CSS.

A vocabulary of one-to-three-letter utilities and a generator that ships only the rules your page uses. 300 bytes of core, 0 bytes per class you don't use, dark mode included. sscss reads the same backwards.

Get started Try the playground

Minified + gzipped

300 B

core: reset, tokens, dark mode — the only CSS every page carries

sscss core300 B
lit406 B
this page*1,163 B
Tailwind v4*4,019 B
tachyons13,110 B

*the CSS generated for this page's 77 utilities, and the same page translated class-for-class to Tailwind v4 (generated for the page only, dark: variants to match). Same minifier, same gzip, for everyone.

Type classes. Watch the box.

This playground runs on Minim: the input writes cls into a JSON state tag and the box's class attribute follows it with data-bind="class:cls". The whole vocabulary is on this page so anything you type works.

Classes Text

Result

Hello from sscss

That is <div class="p6 r2 ba cw t4 b ctr an-fx"> and nothing else.

How it works.

1. Write short classes

Layout f ac jb gr c3, spacing p4 mt6 g3 on a 0–10 scale, type t0–t9 b sb tt, color roles ci cm bs ba, shape r rp bd. Variants: h- hover, m- ≥768px, l- ≥1024px.

2. Generate only what you use

npx @labs_kai/sscss page.html --write

One command reads the page, writes the rules it needs into <style data-sscss> in <head>, and tells you about any class it doesn't know. No build step, no stylesheet request, nothing to purge.

3. Add your own

Anything the vocabulary doesn't cover goes in the page's own <style>; the generator leaves it alone. Tokens live in :root — change six variables and the whole page, dark mode included, follows.

Same component, both ways.

The hero card of this page, written in Tailwind classes and in sscss. Same rendering, same dark mode. The class attributes are 277 bytes and 53 bytes — and the HTML is only the half of it: the CSS generated for this whole page is 4,019 B gzipped in Tailwind v4, 1,163 B in sscss.

Tailwind v4 · 401 B of markup

<div class="rounded-2xl bg-gray-100 dark:bg-gray-900 p-8">
  <p class="text-sm font-semibold text-gray-600 dark:text-gray-400">Minified + gzipped</p>
  <p class="kb font-bold text-green-700 dark:text-green-400">300 B</p>
  <a class="rounded-lg bg-green-700 dark:bg-green-600 text-white px-6 py-3 font-semibold no-underline inline-block transition active:scale-[.97]" href="#use">Get started</a>
</div>

sscss · 177 B of markup

<div class="r2 bs p6">
  <p class="t1 sb cm">Minified + gzipped</p>
  <p class="kb b ca">300 B</p>
  <a class="r ba cw px5 py3 sb nu ib an-fx" href="#use">Get started</a>
</div>

Motion, the basic package.

Eight utilities, transform and opacity only, all off under prefers-reduced-motion: an-in for inserted elements, an-rise scroll entrance, an-spin, an-grow for meters, an-fx button feedback, an-tone for theme changes, an-vt to tune view transitions — and an-sea, a CSS ocean for a hero, cut from one tiny SVG tile and colored by the tokens. They exist because a Minim page needed exactly these.

sscss

level 60%

The whole vocabulary.

209 utilities, one line each. Scales are written once: p4 is padding 1rem, mt6 margin-top 2rem, t3 1.125rem. Prefix any of them with h-, m- or l-.

Filter

Layout

`f`	flex row
`fc`	flex column
`fr`	row (e.g. m-fr after fc)
`fw`	wrap
`gr`	grid; children may shrink (code blocks don't overflow)
`c1–c6`	equal grid columns
`bk`	block
`ib`	inline-block
`hd`	hidden
`ac`	align center
`ae`	align end
`jc`	justify center
`jb`	space between
`je`	justify end
`pc`	center both axes (grid)
`x`	grow to fill
`fs0`	never shrink
`mx`	center horizontally
`rel`	relative
`abs`	absolute
`stk`	sticky to top
`ov`	scroll if needed
`oh`	clip
`wf`	full width
`hf`	full height
`vh`	at least the viewport
`w0–w6`	max-width 20rem 28rem 36rem 48rem 60rem 72rem 65ch

Spacing 0–10 = 0 0.25rem 0.5rem 0.75rem 1rem 1.5rem 2rem 3rem 4rem 6rem 8rem

`p0–p10`	padding
`px0–px10`	padding left+right
`py0–py10`	padding top+bottom
`pt0–pt10`	padding top
`pb0–pb10`	padding bottom
`m0–m10`	margin
`mt0–mt10`	margin top
`mb0–mb10`	margin bottom
`my0–my10`	margin top+bottom
`g0–g10`	gap
`sy0–sy10`	space between children

Type

`t0–t9`	font-size 0.75 0.875 1 1.125 1.25 1.5 1.875 2.25 3 3.75 rem
`b`	bold
`sb`	semibold
`md`	medium
`tt`	tight tracking (headlines)
`lt`	tight leading
`mono`	monospace
`up`	uppercase
`nu`	no underline
`tn`	tabular numbers
`ctr`	text center
`rt`	text right
`nw`	no wrap
`bal`	balanced headline wrapping

Color

`ci`	ink
`cm`	muted
`ca`	accent
`cw`	text on accent
`bg`	ground
`bs`	surface
`bs2`	surface 2 (controls)
`ba`	accent

Shape

`r`	radius
`r2`	double radius
`rp`	pill
`r0`	square
`bd`	hairline border
`bd2`	accent border
`sh`	floating shadow (dialogs)
`tr`	transition
`op`	dimmed
`cp`	pointer
`sr`	screen-reader only

Motion

`an-in`	ease in when inserted
`an-rise`	rise as it scrolls into view
`an-spin`	spin (toggle with data-class)
`an-grow`	width = --pct %, eased
`an-fx`	press/hover feedback for buttons
`an-tone`	eased color changes
`an-sea`	an ocean at the bottom of a rel oh parent (--sea sets its color; accent by default)
`an-vt`	view transitions: .3s (data-each)

Nothing matches — it probably belongs in the page's own <style>.

Use it.

Generate (recommended)

npm i -D @labs_kai/sscss
npx sscss page.html --write     # inline only what the page uses
npx sscss page.html --check     # exit 1 on unknown classes
npx sscss --list                # the cheat sheet

Pair it with Minim for state and events: Minim lite and the sscss core are 1.6 KB together, inlined, and the page makes one request.

Or just load it

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@labs_kai/sscss@1/dist/sscss.base.css">

Every utility, 2.1 KB gzipped (3.6 KB with the responsive variants, sscss.css); sscss.core.css is the 300 B reset + tokens on its own. Still smaller than this one page in Tailwind.

Agents: the repository ships a skill — npx skills add hertonwork/sscss — with the vocabulary, the rules, and the checks.