Top 2021 CSS Frameworks Report, Part 3: Selectors

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:

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

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

• CSS Analyzer

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.

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.

ID selectors

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

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

• #toast-container,
• #materialbox-overlay, and
• #spinnerContainer.cooldown.

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.

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:

• @keyframes button-spin,
• @keyframes icon-loading,
• @keyframes loader,
• @keyframes segment-spin,
• @keyframes form-spin, and
• @keyframes dropdown-spin.

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

Other frameworks don't have this problem.

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.

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:

[aria-expanded]
[aria-expanded=true]
[aria-expanded=false]
[aria-level="1"]
[aria-checked=true]
[aria-checked=false]
[aria-selected=true]
[aria-selected=false]
[aria-disabled=true]
[aria-current]:not([aria-current=false])

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

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.

#RespectCSS

Related resources

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