CSS-Tricks Version 20 Released With Major Site Overhaul
CSS-Tricks has officially launched Version 20, bringing deep backend cleanup, security enhancements, and major design updates after 19 years.
Stock photo for illustration only, not from the actual event
- CSS-Tricks rolls out Version 20 after 19 years of accumulated features.
- Features a comprehensive security audit with Claude and a total Sass rewrite.
- Reduces total CSS file size to 169 KB and unifies form and table designs.
After a remarkable 19-year run, the renowned developer resource CSS-Tricks has officially announced its major Version 20 update. While the site has continuously shipped new features, particularly ramping up since 2024, a thorough structural overhaul was long overdue. The team decided to roll up their sleeves and give the entire codebase a fresh coat of paint to prepare for the future.
The bulk of the changes in Version 20 happen behind the scenes. The team began by excavating the theme and clearing out accumulated ghosts and legacy code left over across nearly two decades. This cleanup has made terminal commands run super cleanly and quickly, while also making the theme directory much less intimidating for future maintenance.
<
Stock photo for illustration only, not from the actual event
For the security pass, the team tackled what is often considered everyone's least favorite task. Alongside fixing unescaped custom field calls, they enlisted Claude to perform a holistic audit. Claude reviewed recent WordPress security release notes to help harden the theme in compliance with current core standards.
Leveraging AI tools like Claude for security audits and code reviews reflects a modern trend among web developers, helping catch subtle vulnerabilities and streamline maintenance tasks efficiently.
Another major milestone is the complete Sass rewrite. While the author maintains a fondness for partials, compromises were made to streamline the architecture. The overall CSS file size dropped from 180 KB down to 169 KB by cleverly serving form styles into a separate forms.css file loaded only on pages utilizing WooCommerce, Restrict Content Pro, and Gravity Forms. Furthermore, link styles, forms, and tables were completely overhauled to establish visual harmony and improve accessibility.
"Forms and tables have both been redone. That’s tough to do in a WordPress theme where these components don’t always come from one source."
CSS-Tricks
Visible changes are also present throughout the site, including playful colorful dot textures in the header and footer, animated gradients on the homepage, and revamped indexes for both the Almanac and Guides. Author pages also received a layout tweak, shifting the sidebar to better highlight published articles.
Source: CSS-Tricks
Found something wrong in this article? Report an issue with this article
Comments
Leave a Comment