CSS-Tricks Starts Redesign Rollout, Cutting Zipped CSS by 22%

By Rebecca Stone

CSS-Tricks’ soft-pushed redesign cuts zipped CSS from 31.7KB to 24.6KB—a reduction of 7.1KB, or about 22%. The uncompressed stylesheet also falls from 180KB to 169KB, an 11KB, or roughly 6%, reduction.

The author considers the change meaningful rather than dramatic. The announcement reports no page-speed test, so the measurable result is a smaller shipping file, not a demonstrated load-time gain.

CSS-Tricks released the redesign as a soft push, giving RSS subscribers an early look. A fuller write-up is due Monday and will include a side-by-side comparison with the previous design.

What changes in the theme and toolchain?

Called “Ghost Busting,” the cleanup starts with a theme that accumulated pieces across 19 years. The announcement’s author says they excavated it, found inherited remnants and began removing them. That work reaches below the visible page and into the structure supporting it.

The development setup also replaces the five-year-old workflow with what the author calls a much better one: Prettier, Stylelint, GitHub Actions and automatic cache-busting. Together, those tools add automated formatting, checking, integration and asset refresh to the development process.

Security received a separate audit. “I decided to ask Claude to help me with a holistic audit,” the announcement’s author said. The prompt asked Claude to review recent WordPress security release notes and identify where the theme could harden itself to align with what WordPress does. The preview does not list vulnerabilities, completed fixes or test results.

The stylesheet reduction came from a Sass rewrite. The zipped file now measures 24.6KB rather than 31.7KB, while the uncompressed source sits at 169KB rather than 180KB. Compression leaves the new stylesheet about one-fifth smaller; before compression, the reduction is about one-sixth.

How does the visual system work?

The redesign’s “Design-ish System” establishes broad consistency through semantic tokens. Colors, fonts, font sizes and reused values now have named roles across the theme. That structure gives designers a shared vocabulary and makes repeated interface decisions easier to apply consistently instead of leaving each page to choose its own values.

The theme toggle responds to an unusual starting condition: the site has been predominantly dark even though its content sits against white. The author treated that arrangement as though a dark mode already existed, then produced a “creamy light theme.” The description concerns the visual result; it does not specify how the toggle behaves or which version loads first.

A separate “Jawbreaker Texture” appears throughout the site. “I’m calling it ‘Jawbreaker’ for lack of a better term and because it reminds me of the jawbreaker candy I loved as a kid,” the author wrote. The announcement splatters this recurring texture across the design but attaches no new behavior to it.

What changes in the reference and guide pages?

The new CSS Almanac changes the reference section into a real index of CSS features. Its purpose is to get readers to a needed feature quickly, an approach the author compares to the “CSS periodic table” that someone, somewhere, sometime might have made. The result gives the feature list an organized route through the site.

The new Guides Index separates discovery into three modules:

• A featured guide at the top.
• A widget listing newly added and updated guides.
• A categorized grid containing the guides below.

Author pages receive a spatial rebalance rather than a new content model. The right sidebar moves to the left, while the author image and biography move into the article area, allowing posts to start higher on the page. In the WordPress admin, fonts and text now receive minimal styling that reflects the front end, reducing the mismatch between editing and published output.

The redesign’s measurable gains so far are a 22% smaller zipped stylesheet and the removal of code from a 19-year accumulation. Its less measurable claims concern maintainability and navigation: semantic tokens, a light theme and a three-part guide structure. Monday’s promised comparison with the old design will show whether those mechanisms deliver the consistency the preview claims.