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

Author: Silvestar
Published:

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

⚠️ 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:

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:

Site Size CSS source lines CSS lines Comment count Comment size
Ant Design 544.07 kB 20283 8 2 129 B
Bootstrap 163.82 kB 7336 6 1 209 B
Bulma 206.62 kB 7983 1 2 129 B
Foundation 134.84 kB 5865 1 1 72 B
Halfmoon 235.75 kB 8695 1 0 0 B
Materialize 139.62 kB 5780 12 3 453 B
Primer CSS 591.74 kB 18672 21 6 502 B
Pure CSS 16.79 kB 769 9 3 294 B
Semantic UI 628.29 kB 22059 362 46 7.43 kB
Tachyons 73.26 kB 4793 1 2 112 B
TailwindCSS 2.93 MB 97518 1 280 431 B
UIkit 256.01 kB 7367 1 1 83 B

File Sizes

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

Site Size
Largest size TailwindCSS 2.93 MB
Smallest size Pure CSS 16.79 kB
Average size - 493.72 kB

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.

CSS sizes
Site Size
Ant Design Size: 544.07 kB
Bootstrap Size: 163.82 kB
Bulma Size: 206.62 kB
Foundation Size: 134.84 kB
Halfmoon Size: 235.75 kB
Materialize Size: 139.62 kB
Primer CSS Size: 591.74 kB
Pure CSS Size: 16.79 kB
Semantic UI Size: 628.29 kB
Tachyons Size: 73.26 kB
TailwindCSS Size: 2.93 MB
UIkit Size: 256.01 kB
This graph is interactive. You could tap or hover over bars to see extra information.

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.

CSS lines
Site CSS lines
Ant Design CSS lines: 8
Bootstrap CSS lines: 6
Bulma CSS lines: 1
Foundation CSS lines: 1
Halfmoon CSS lines: 1
Materialize CSS lines: 12
Primer CSS CSS lines: 21
Pure CSS CSS lines: 9
Semantic UI CSS lines: 362
Tachyons CSS lines: 1
TailwindCSS CSS lines: 1
UIkit CSS lines: 1
This graph is interactive. You could tap or hover over bars to see extra information.

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

CSS source lines
Site CSS source lines
Ant Design CSS source lines: 20283
Bootstrap CSS source lines: 7336
Bulma CSS source lines: 7983
Foundation CSS source lines: 5865
Halfmoon CSS source lines: 8695
Materialize CSS source lines: 5780
Primer CSS CSS source lines: 18672
Pure CSS CSS source lines: 769
Semantic UI CSS source lines: 22059
Tachyons CSS source lines: 4793
TailwindCSS CSS source lines: 97518
UIkit CSS source lines: 7367
This graph is interactive. You could tap or hover over bars to see extra information.

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.

Site CSS source lines
Most CSS source lines TailwindCSS 97518
Least CSS source lines Pure CSS 769
Average CSS source lines - 17260

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.

CSS comment count
Site Comment count
Ant Design Comment count: 2
Bootstrap Comment count: 1
Bulma Comment count: 2
Foundation Comment count: 1
Halfmoon Comment count: 0
Materialize Comment count: 3
Primer CSS Comment count: 6
Pure CSS Comment count: 3
Semantic UI Comment count: 46
Tachyons Comment count: 2
TailwindCSS Comment count: 280
UIkit Comment count: 1
This graph is interactive. You could tap or hover over bars to see extra information.

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.

Site Comment count
Most number of comments TailwindCSS 280
Least number of comments Halfmoon 0
Average number of comments - 29

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.

CSS comment sizes
Site Comment size
Ant Design Comment size: 129 B
Bootstrap Comment size: 209 B
Bulma Comment size: 129 B
Foundation Comment size: 72 B
Halfmoon Comment size: 0 B
Materialize Comment size: 453 B
Primer CSS Comment size: 502 B
Pure CSS Comment size: 294 B
Semantic UI Comment size: 7.43 kB
Tachyons Comment size: 112 B
TailwindCSS Comment size: 431 B
UIkit Comment size: 83 B
This graph is interactive. You could tap or hover over bars to see extra information.

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.

Site Comment size
Largest comment size Semantic UI 7.43 kB
Smallest comment size Halfmoon 0 B
Average comment size - 820 B

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

About the Author

Silvestar Bistrović

Silvestar Bistrović

Silvestar is a frontend UI developer who enjoys creating pixel-perfect, responsive, and modern websites. Making faster, lighter, and more secure sites using WordPress or Static Page Generators is his speciality. When he is not coding, Silvestar likes to write articles on his blog.

If you would like to write, analyze and audit more sites with us, contact us.

Share on Social Networks

Subscribe

We are working hard to publish new reports and blog posts as soon as possible.

If you would like to get recent reports in your inbox, subscribe here!


Powered by TinyLetter