The CSS Tricks 2019 redesign in numbers

On the 1st of January CSS-Tricks.com got a fresh coat of paint, and what a looker she is! Chris Coyier and his team have done an excellent job at delivering a stunning looking website. A redesign at such scale (CSS Tricks is no tiny website) is interesting to look at from a CSS analysis perspective, so let’s do that.

(If you just want to take a look at the raw numbers: Compare CSS Tricks 30 Dec 2018 21:18:23 to 1 Jan 2019 20:27:56)

A quick overview of numbers

Here are some numbers that’ll tell us just how big this redesign has been. These are some stylesheet-wide numbers that tell something about the CSS in general.

MetricBeforeAfterDifference
Filesize296 kB176 kB-40.48%
Rules15921494-6.16%
Selectors29512380-19.35%
Declarations40904146+1.37%

The drop in filesize is one of the most significant changes. A reduction of more than 40%! That is a massive achievement and I suspect the team have thrown away a large chunk of the previous codebase that became obsolete.

Changes in design

The most notable change in a redesign is the visual aspect of things, so let’s find out how that reflects on the brand-related metrics in the statistics.

MetricBeforeAfterDifference
Colors175137-21.71%
Font-sizes175137-30.88%
Font-families78+14.29%

The amount of unique colors and font-sizes have decreased quite a lot. I suspect that the team focused on building a more consistent looking UI. Fun fact from the font-family department: no more icon fonts!

Changes in complexity

Complexity in CSS is hard to define based on a couple of numbers, but here is a small list of numbers that I use to audit a codebase that I don’t own on complexity.

MetricBeforeAfterDifference
ID selectors369298-19.24%
Universal selectors1112+9.09%
Average identifiers per selector3.392.81-17.10%
Maximum identifiers per selector10100.00%
Property browserhacks240-100.00%
!importants8260-26.83%
!importants (%)0.020.01-27.82%

One metric in particular draws my attention here: average identifiers per selector. This metric is a tough one to improve and seeing that it went down with a whopping 17% just blows my mind. That means that a lot of selectors have gotten a lot less nesting. In terms of complexity that means that the CSS is a lot less tied to the HTML, which is usually a good thing. Also, having a lot less ID selectors means that there’s a whole lot less of specificity to deal with.

Closing thoughts

I think the CSS-Tricks Team have done a great job at this redesign. The design aspect is excellent and it feels so much fun to browse around the site. While having ’good’ stats was certainly not something that the team had in mind when working on the redesign, I think they did an excellent job on decreasing complexity and increasing cohesion. Bravo!

I would love to read a blog post from the engineering/design team that created this new design to see what they think about these numbers.

Published on
by Bart Veneman
Back to blog homepage