Top 2021 CSS Frameworks Report, Part 3: Selectors

Author: Silvestar

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

In this report, I have audited top CSS frameworks (according to the State of CSS report) against selectors. 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:

Using this tool, I have gathered some intriguing information about CSS selectors.

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

The Report

CSS selectors define which elements the rules should be applied to.

Site Selectors Unique Percent
Most selectors TailwindCSS 39213 39081 99.66
Least selectors Pure CSS 392 296 75.51

As expected, TailwindCSS has the most selectors. TailwindCSS is the utility-first CSS framework, meaning every class serves a single purpose. On the other hand, PureCSS has the least selectors. That is expected since PureCSS tends to serve CSS with a minimal footprint. We could consider these two frameworks as extremes. Every other framework has between ~2k and ~9k selectors.

CSS selectors
Site Selectors
Pure CSS Selectors: 392
Unique: 296 (75.51%)
Materialize Selectors: 2181
Unique: 1900 (87.12%)
Foundation Selectors: 2244
Unique: 1791 (79.81%)
Tachyons Selectors: 2340
Unique: 2283 (97.56%)
Bootstrap Selectors: 2880
Unique: 2708 (94.03%)
Halfmoon Selectors: 3390
Unique: 2960 (87.32%)
Bulma Selectors: 3673
Unique: 3460 (94.2%)
Primer CSS Selectors: 4006
Unique: 3643 (90.94%)
UIkit Selectors: 4343
Unique: 4027 (92.72%)
Ant Design Selectors: 7200
Unique: 6524 (90.61%)
Semantic UI Selectors: 9111
Unique: 8141 (89.35%)
TailwindCSS Selectors: 39213
Unique: 39081 (99.66%)
This graph is interactive. You could tap or hover over bars to see extra information.

ID selectors

ID selectors contain HTML id attributes. They are often considered undesirable and too specific.

Site Selectors Unique
Most ID selectors Materialize 6 3

Only Materialize uses ID selectors. I find that very odd, especially when we inspect which selectors are in question:

My opinion is that any ID selector shouldn’t be part of CSS frameworks.

Keyframes selectors

Keyframes selectors could be considered as CSS animation definitions.

Site Selectors Unique Percent
Most keyframes selectors Semantic UI 370 18 4.86

Semantic UI framework has the most keyframes selectors. Although there are 370 keyframes selectors, only ~5% are unique. For example, there are at least six keyframes selectors that have the same code:

My gut is telling me there should be only one reusable definition in this case.

Other frameworks don't have this problem.

Site Selectors Unique
Pure CSS 0 0
Foundation 0 0
Tachyons 0 0
Halfmoon 1 1
TailwindCSS 7 5
Bulma 8 2
Bootstrap 12 4
Primer CSS 34 6
UIkit 50 11
Materialize 94 20
Ant Design 224 4
Semantic UI 370 18

Three CSS frameworks don’t have keyframes selectors: PureCSS, Tachyons, and Foundation. That is fine. CSS animations could be considered progressive enhancement anyway. What is more interesting is that only Bootstrap and PrimerCSS take advantage of the prefers-reduced-motion feature for detecting users’ settings for reduced motion. The only difference is that Bootstrap removes animations with the prefers-reduced-motion: reduce selector, and PrimerCSS adds animations with the prefers-reduced-motion: no-preference selector.

The positive thing about CSS animations is that animated properties are mainly the most convenient ones: transforms and opacity. I saw some other properties, like perspective and box-shadow, but it wasn’t a common occurrence.

A11y selectors

Accessibility or a11y selectors are related to accessibility features.

Site Selectors Unique Percent
Most a11y selectors Primer CSS 107 101 -

According to CSS Analyzer, Primer CSS has the most a11y selectors, which is admirable. Indeed, if we take a closer look, we would find the following selectors:


All these selectors point out that Primer CSS is built with accessibility awareness.

Site Selectors Unique
Pure CSS 0 0
Tachyons 0 0
Halfmoon 0 0
Bulma 0 0
Materialize 0 0
Semantic UI 0 0
TailwindCSS 1 1
Bootstrap 1 1
Foundation 3 3
Ant Design 13 13
UIkit 24 24
Primer CSS 107 101

Six CSS frameworks don’t have any a11y selector. Although some others have at least one, I am not convinced that accessibility was vital to these frameworks. For example, UIkit has 24 a11y selectors, but they take advantage only of the [aria-expanded=true] selector. That is not enough.

The Conclusion

CSS Analyzer is an exciting tool. It reveals all sorts of interesting metrics. For example, by inspecting a11y selectors, we might know whether accessibility is considered or not. Or we could find how many CSS animation definitions there are. By applying more effort, we could determine if the CSS code respects the user’s settings for reduced motion. There are many other metrics that I will be exploring in future articles.

If you are interested in how your CSS code performs, use the free CSS Analyzer online tool, register and take advantage of all features, or use the free CLI tool.


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