Top 2021 CSS Frameworks Report, Part 1: The CSS File Sizes

In this report, I have audited top CSS frameworks according to the State of CSS report. Here's the complete list:

• Ant Design
• Bootstrap
• Bulma
• Foundation
• Halfmoon
• Materialize
• Primer CSS
• Pure CSS
• Semantic UI
• Tachyons
• TailwindCSS
• UIkit

⚠️ It is worth noting that I analyzed full minified versions of every framework. Unfortunately, I had to use the previous version of the TailwindCSS since I could not download the latest one in full.

The Tooling

For this report, I used the following tools:

• extract-css-core
• @projectwallace/css-analyzer

Using these tools, I extracted and analyzed CSS sizes and found some interesting things.

⚠️ Any errors in the report that might be caused by invalid software are not deliberate and should be considered involuntary.

The Report

Here are the final numbers:

File Sizes

Unsurprisingly, TailwindCSS is the biggest while Pure CSS is "ridiculously tiny," just like its website says.

TailwindCSS consists of many utility classes, which means there is a class for every single purpose, which is why the full version is so big. However, it is fair to say that TailwindCSS is not meant to be used as a whole — that is why the latest version doesn't allow you to download the whole framework. Instead, you need to configure and define the utilities you will use.

On the other hand, Pure CSS's site says: "crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered." When building a framework, that is some healthy mindset — to deliver the least amount of code that could be easily overridden.

Of course, there is a big difference between how frameworks should be used and which problems they should solve. Even if we ignore TailwindCSS and focus on the following three frameworks, Ant Design, Primer CSS, and Semantic UI, which are over half of a megabyte in size, it is still a very big difference in the amount of code these frameworks use in comparison to Tachyons and Pure CSS.

The average size of CSS frameworks is almost half of a megabyte, which is a lot of CSS code. Although we live in a modern world where half of a megabyte does not mean much for our data plans and our devices, we should all strive to deliver the least possible amount of data on our website. If not because of our data plans, then because of a smaller carbon footprint.

Lines of Code

Analyzing only file sizes is fine, but I thought it would be interesting to examine the number of lines of code.

Since I analyzed only minified versions, we could see that six frameworks deliver a single line of code. That is what most of us expect when talking about minified code. But Semantic UI delivers no less than 362 lines of code in minified version. That is a lot. The reason is that it places the code for every component in the new line.

Speaking of new lines, every framework with more than one code line has multiline comments.

Source Lines of Code

Now let's analyze source lines of code. In case you are wondering what source lines of code are, here's the definition:

Source lines of code are counted as the sum of these things:

• The number of selectors;
• The number of declarations;
• The number of atrules;

— Bart Veneman, Project Wallace

Since TailwindCSS has a new class for every purpose, it doesn't surprise me to see that it has more than 97k source lines of code. Again, Pure CSS has the fewest source lines of code — only 769.

The average number of source lines of code is more than 17k. That is seventeen thousand selectors, declarations, and atrules.

CSS Comments

Finally, I analyzed the number and the size of comments.

Most frameworks have less than seven comments. That is expected since I analyzed minified versions of every framework. On the contrary, semantic UI and TailwindCSS have 46 and 280, respectively.

Although comments are usually valuable and welcome in the code, I don't think there should be more than one comment in minified versions. For example, minified Halfmoon doesn't have any comments. Since today's tools can strip comments from the code, I am not sure why some frameworks don't do it.

When talking about the size of comments, every framework has less than 503 bytes of comments, except for Semantic UI. It has more than 7 kilobytes of comments. Since Semantic UI is the second file size with more than 600 kilobytes, ~7 kilobytes might not seem like a considerable amount, but it definitively is.

The Conclusion

Most frameworks are not meant to be used as a whole. Every developer should cherry-pick components, utilities, and features that are will be used in the project. But let's face it, many people out there will include the whole framework to the site. So making a framework lighter should be the priority.

Not only that, bigger CSS means more jobs for the browser. Although modern devices don't have problems with that, it affects your Core Web Vitals score and your Google score. So it makes sense to pay attention to the CSS size.

So, just like in previous posts about file size in Premier League and Bundesliga sites, I wanted to bring to attention the size of CSS files. So, let's make them smaller and make our users and our planet happier.

#RespectCSS

Related resources

• Report: Top 2021 CSS Frameworks Report, Part 2: Validation