Geoff Graham spent weeks updating CSS-Tricks with a new theme that trims old code, adds a three-way color toggle, and brings more consistent styles to the site.
carries 19 years of front-end history, and its design showed the weight of that past. In , Geoff Graham described version 20, a theme update he built over several weeks. Graham framed the release as an iterative rollup rather than a rebuild: some changes stand out on the page, and others remove code, scripts, and database content that the site no longer needed.
What’s new
The most visible additions sit in the site’s color and layout. Graham added a theme toggle that handles system, light, and dark preferences with a single control. Because CSS-Tricks had long mixed light and dark elements, Graham treated the earlier design as a dark starting point and introduced a cream-colored light theme through background and component changes. The main article content area stays white in both modes. The theme switch uses a view transition that slides the new theme over the previous one.
Graham also gave the header and footer a dotted backdrop he calls Jawbreaker. The texture uses an SVG with <circle> elements generated in PHP, with inline values for position, fill, size, delay, and duration to create a subtle twinkle effect. The same pattern appears on the 404 page.
On the homepage, Graham added a blob shape behind the author avatar grid for browsers that support border-shape() and random(). He credited for the base shape, then mapped hover-state points to random() values so the shape changes on each page load. Graham noted that only Chrome supports the required features.
The and indexes received new layouts. Graham replaced the Almanac’s earlier card layout with an index modeled on a periodic table to help readers find CSS features faster. The Guides page now leads with a featured guide, a widget for new and updated guides, and a categorized grid for the site’s 27 guides.
Developer experience
Much of version 20 targets the theme’s internals. Graham removed unused JavaScript, including scripts for embedded newsletter versions, old <details> toggles in the Flexbox Guide, a jQuery lazy-loader now covered by WordPress core, and third-party ad code replaced by self-hosted ads. The compiled JavaScript file dropped from 151.6 KB (55.3 KB gzipped) to 133.8 KB (48.1 KB gzipped).
Graham retired the archived CSS-Tricks Forum, which he said the site put in archive mode around 2018. After deactivating the bbPress plugin and clearing the database, he reported a 400 MB reduction in database size and removed several custom templates.
The development workflow moved past a long-running Gulp setup. Graham added Prettier enforcement through husky and lint-staged, Stylelint for alphabetical CSS property order, a GitHub Actions build check, and cache-busting based on filemtime() instead of rewriting source files.
Graham kept for partials and reorganized the styles into a clearer directory structure. He said he wants to add CSS Cascade Layers later. Compiled CSS fell from 180 KB (31.7 KB gzipped) to 169 KB (24.6 KB gzipped). Graham moved form styles into a separate forms.css file that loads only on pages where WooCommerce, Restrict Content Pro, or Gravity Forms enqueue assets.
A set of design tokens now covers colors, fonts, font styles, font sizes, padding, and margins. Graham used those tokens to make links, forms, and tables more consistent across templates and plugin output. He reset plugin stylesheets so Gravity Forms, WooCommerce, and Restrict Content Pro forms share a common look. Link styles now provide visual cues that do not depend on color or opacity changes.
Graham also ran a security pass on the theme. He reviewed recent WordPress security release notes with help from Claude to spot places where the theme could follow WordPress hardening practices, then made patches such as escaping custom field calls.
User impact
Version 20 aims to make CSS-Tricks faster to load, easier to navigate, and clearer to read. Graham reported a drop in total page weight from 2.03 MB to 1.24 MB in his Lighthouse comparisons. Largest Contentful Paint improved from 8.5 seconds to 7.2 seconds, Cumulative Layout Shift went from 0.032 to 0, and Time to Interactive fell from 8.6 seconds to 4.0 seconds. He noted that some performance factors remain outside his control.
Lighthouse scores in Graham’s tests also showed gains in accessibility, from 86 to 91, and best practices, from 75 to 100. Performance rose from 71 to 72, and SEO moved from 92 to 90. Graham described the results as useful guidance rather than fixed facts.
For readers, the update changes how the site feels day to day: a theme toggle for different lighting conditions, clearer link and table styles, and index pages that expose more of the Almanac and Guides at once. For the codebase, Graham’s cleanup gives future changes a smaller surface, from the Sass structure to the WordPress admin styles that now reflect front-end fonts and text treatment.