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:
- 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:
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
Specificity
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.
Complexity
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.
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.
Conclusion
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.
