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)
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.
|Filesize||296 kB||176 kB||-40.48%|
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.
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.
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!
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.
|Average identifiers per selector||3.39||2.81||-17.10%|
|Maximum identifiers per selector||10||10||0.00%|
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.
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.
A deep-dive in how the Analyze CSS page renders 6 times faster by applying 2 basic principles.
There's lots of places in CSS to have complexity, but we tend to focus on selectors most of the time. Let's have a look at other places too.