Top 2021 CSS Frameworks Report, Part 2: Validation

Author: Silvestar
Published:

This is the second part of the Top CSS Frameworks of 2022 report. Here’s the first part of the report about the file sizes.

In this report, I have audited top CSS frameworks (according to the State of CSS report) for errors and warnings. 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 download the latest one in full.

The Tooling

For this report, I used the following tools:

Using this tool, I validated CSS code against the W3C CSS Validation Service. In addition, all errors and warnings are validated against the css3svg profile.

⚠️ 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 Errors Error types Warnings Warning types URL
Bootstrap 0 0 164 8 See errors
Materialize 3 2 437 4 See errors
Ant Design 7 3 556 6 See errors
Semantic UI 95 4 1782 7 See errors
Bulma 9 1 131 8 See errors
Foundation 0 0 876 6 See errors
UIkit 0 0 115 6 See errors
Tachyons 0 0 86 6 See errors
Primer CSS 4024 4 163 9 See errors
TailwindCSS 0 0 576 7 See errors
Pure CSS 0 0 45 3 See errors
Halfmoon 0 0 1151 5 See errors

Errors

Let’s start with frameworks that did a good job and that don’t have any errors in code:

When using a framework, you expect to get the code without errors, but only 7 out of 12 CSS frameworks deliver error-free code.

The rest of the frameworks have at least one error. Two frameworks with the most errors are Semantic UI and Primer CSS. Semantic UI has around 100 errors, of which 78 are related to invalid values.

Primer CSS has no less than 4025 errors! The majority of these errors are related to a strange snippet that looks like JavaScript code that is included in the code a few thousand times: (obj) => get_1.default(obj, path). Since I audited an earlier version of the framework, 19.2.0, in January, I checked again with the latest version, 19.8.2. To my surprise, there were even more errors, shocking 5268 errors.

Site Count
Most errors Primer CSS 4024
Least errors Bootstrap, Foundation, UIkit, Tachyons, TailwindCSS, Pure CSS, Halfmoon 0
Average number of errors - 345
median 12

The average number of errors is 346, and the median is 13.

Error types

These are the discovered types of errors:

⚠️ Note that this is my interpretation of error meanings. Unfortunately, I couldn’t find the official list of all errors described in detail.

According to the W3C CSS Validation Service translation keys, many different errors could occur (more than 80), and the parser found only nine different ones when validating these frameworks. Here’s the list of all error types by CSS framework:

Site Error type Count
Materialize Parser error 2
Only “0” can be a “unit” 1
Ant Design Negative value is not allowed 1
Is not a value 5
Only “0” can be a “unit” 1
Semantic UI Property doesn't exist in “CSS Level 3 + SVG” profile 9
Property doesn't exist 5
Too many values or values are not recognized 3
Is not a value 78
Bulma Is not a value 9
Primer CSS Parser error 4016
Error in value 2
Is not a valid RGB color 1
Is not a value 5

Most of the errors are related to values — either the values are out of range (negative values), zero value has a unit when it shouldn’t, or the value is invalid. The other three error types are a general error when the parser cannot read the line and an error when a property doesn’t exist. It is worth noting that the css-validator tool reported the following CSS properties as non-existing:

The font-smoothing property actually doesn’t exist, but tap-highlight-color does, but it is a non-standard property. The rest of the properties exist but are not supported in the “CSS Level 3 + SVG” profile. I think it has to do with the SVG part since these are supported in other profiles.

Warnings

Every validated CSS framework has at least a few dozens of warnings, but there are only two frameworks with less than a hundred warnings: Pure CSS and Tachyons. On the other hand, there are two frameworks with more than a thousand warnings: Halfmoon and Semantic UI. The rest are between these two values with an average of 507 warnings.

Site Count
Most warnings Semantic UI 1782
Least warnings Pure CSS 45
Average number of warnings - 507
median 426

Warning types

The parser found 14 different warnings. Here’s the list with explanations:

⚠️ Note that this is my interpretation of warning meanings. Unfortunately, I couldn’t find the official list of all warnings described in detail.

Although most of these warnings could be ignored, I found them really insightful. For example, I noticed that every framework uses prefixed properties, pseudo-elements, and pseudo-classes. I also discovered that only five frameworks use CSS variables, and three use CSS hacks. And did you know that Semantic UI imports Lato font from Google Fonts? I didn’t, and I couldn’t figure out why.

I also noticed that the parser complained about the clip property for the deprecated value warning. I found out that the property is indeed deprecated, according to caniuse. The parser also complained about the auto value for the pointer-events property for the unofficial value warning. I didn’t know that the auto value is not officially supported. Finally, I noticed that the parser complained about the transition property in the @media print rule. It makes sense not to include transitions when printing.

Site Warning type Count
Bootstrap Not-needed at-rule 5
CSS variable 32
Deprecated value 1
Deprecated property 2
Unofficial value 3
Not-needed pseudo-class 5
Not-needed pseudo-element 42
Not-needed property 74
Materialize Not-needed at-rule 11
Not-needed pseudo-class 7
Not-needed pseudo-element 25
Not-needed property 394
Ant Design Not-needed at-rule 60
Deprecated value 2
Unofficial value 10
Not-needed pseudo-class 29
Not-needed pseudo-element 33
Not-needed property 422
Semantic UI Not-needed at-rule 56
Deprecated value 2
Unsupported import 1
Unofficial value 3
Not-needed pseudo-class 17
Not-needed pseudo-element 50
Not-needed property 1653
Bulma Not-needed at-rule 2
CSS variable 4
Deprecated value 1
Deprecated property 1
Unofficial value 2
Not-needed pseudo-class 20
Not-needed pseudo-element 58
Not-needed property 43
Foundation CSS hack 1
Deprecated property 3
Property doesn't exist for media 10
Not-needed pseudo-class 6
Not-needed pseudo-element 15
Not-needed property 841
UIkit Not-needed at-rule 1
CSS variable 4
No declaration 1
Not-needed pseudo-class 12
Not-needed pseudo-element 61
Not-needed property 36
Tachyons CSS hack 1
Deprecated property 8
Invalid separator 4
Not-needed pseudo-class 4
Not-needed pseudo-element 10
Not-needed property 59
Primer CSS CSS hack 1
CSS variable 88
Deprecated value 1
Deprecated property 3
Out of range value 1
Unofficial value 1
Not-needed pseudo-class 4
Not-needed pseudo-element 16
Not-needed property 48
TailwindCSS CSS variable 409
Deprecated value 6
Deprecated property 36
Unofficial value 6
Not-needed pseudo-class 3
Not-needed pseudo-element 5
Not-needed property 111
Pure CSS Not-needed pseudo-class 6
Not-needed pseudo-element 9
Not-needed property 30
Halfmoon Deprecated property 2
Unofficial value 1
Not-needed pseudo-class 13
Not-needed pseudo-element 69
Not-needed property 1066

The Conclusion

I must admit I didn’t use the css-validator service very often. It was too time-consuming to go through all errors and warnings and try to fix them. After all, the code worked thanks to the forgiving nature of the CSS.

But what would happen if the browser breaks when it finds an error in CSS? Imagine how many sites would stop working. We complain about CSS all the time, but CSS is too kind to us. It lets us make mistakes unpunished.

Now, go ahead and test your site against the W3C CSS Validation Service and see how many errors and warnings do you have. I was surprised that my personal site has zero errors and warnings. And if you are wondering if this site has any errors, it doesn’t.

#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