How We Ship a Block Theme in Under 50kb of CSS

When we rebuilt the catalogue as block themes in 2024, we set one hard constraint: no theme ships more than 50kb of uncompressed CSS. Not 50kb after gzip — 50kb on disk. It sounds arbitrary. It turned out to be the single most useful design constraint we've ever adopted.

Where the weight actually lives

Before the rewrite, our average theme shipped 214kb of CSS. Roughly 60% of that was utility classes nobody used, 20% was per-component overrides fighting the block editor, and the rest was genuine design.

Four cuts that did most of the work

• Delete your reset. theme.json already normalises what matters.
• Style layout with core's flex and grid block supports, not custom classes.
• Never write a component style you could express as a block style variation.
• Ship one font family with one variable weight axis.

theme.json is the budget

Anything you can express in theme.json is CSS WordPress generates for you, deduplicated, and only for the blocks present on the page. Anything you write by hand loads everywhere, forever. That asymmetry should decide almost every styling argument.

{
  "settings": {
    "typography": {
      "fluid": true,
      "fontSizes": [
        { "slug": "body", "size": "1.0625rem", "fluid": false }
      ]
    }
  }
}

A 50kb budget doesn't make a theme uglier. It makes you decide what the theme is actually about.

The numbers

Across the nine themes we now average 41kb of CSS and 0 bytes of JavaScript on a typical article page. Largest Contentful Paint on our reference shared-hosting install sits at 1.1s, down from 2.9s.