Top 2021 CSS Frameworks Report, Part 4: Specificity and complexity

Author: Silvestar

This is the fourth part of the Top CSS Frameworks of 2021 report. Read the previous reports about the file sizes, errors and warnings, and selectors.

In this report, I have audited top CSS frameworks (according to the State of CSS report) for specificity and complexity. Here’s the complete list of audited frameworks:

⚠️ It is worth noting that I had to use the previous version of the TailwindCSS since I could not fully download the latest one.

The Tooling

For this report, I used the following tools:

I have gathered information about CSS selectors, specificity, and complexity using this tool.

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

The Report


CSS specificity is the algorithm browsers use to determine the “weight” of the selector. “Lighter” selectors are believed to be easier to maintain and comprehend.

Site Specificity
Max specificity Materialize 1,1,0
Min of max specificity TailwindCSS 0,3,0

We can see that Materialize has the highest specificity and Tachyons has the lowest maximum specificity. Materialize is the only CSS framework that uses ID selectors, which is very odd.

TailwindCSS has the lowest maximum specificity, which is expected with it being the utility class framework.

Site Specificity
Pure CSS 0,5,1
Tachyons 0,3,0
Halfmoon 0,10,1
Bulma 0,7,1
Materialize 1,1,0
Semantic UI 0,11,0
TailwindCSS 0,3,0
Bootstrap 0,7,0
Foundation 0,6,0
Ant Design 0,9,0
UIkit 0,6,0
Primer CSS 0,6,1

Almost every framework’s maximum specificity depends mostly on classes. That doesn’t surprise me since classes are the most common way to style HTML elements.


CSS specificity tells us how “heavy” our selectors are. As Bart Veneman explained in his article, we could manipulate specificity with the new :where() and :is() selectors, which decreases the specificity but adds to the complexity, leading to more problems.

Some recent additions to CSS have made it easier to deal with specificity issues, like :where() and :is(). But they can make selectors more complex.

Bart Veneman

In the case of CSS complexity, the biggest problems are usually related to debugging. So, now that we know what CSS complexity is, let’s see the maximum complexity for each framework:

Site Avg complexity Max complexity
Pure CSS 3 8
Tachyons 1 5
Halfmoon 3 18
Bulma 3 13
Materialize 3 16
Semantic UI 5 19
TailwindCSS 1 7
Bootstrap 1 14
Foundation 3 9
Ant Design 3 18
UIkit 5 15
Primer CSS 1 12

CSS complexity is defined as a whole number. The higher the number, the higher the complexity.

Two-thirds of CSS frameworks have the maximum complexity in double-digits. That doesn’t sound ideal, far from it. On the other hand, an average complexity is usually 1, 3, or 5. That sounds much more optimistic.

Site Complexity
Max complexity Semantic UI 19
Min of max complexity Tachyons 5
Average complexity - 3.15

Semantic UI has the highest complexity selector of 19, while Tachyons has the lowest, just 5. Average complexity is quite good overall, just 3.15.


CSS specificity is a long-know metric that most developers usually ignore. Now we have another CSS metric that might be ignored, CSS complexity.

While CSS specificity and complexity are just numbers, they could help us understand the quality of the framework. For example, if you use a CSS framework as a base for your project and think you will need to overwrite its selectors, these numbers are helpful.

How we write our selectors matters, so keep that in mind and try to reduce the specificity and complexity of your code.


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


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