WP Ad Inserter plugin for WordPress

Find out the quality of your CSS code

Read Time:1 Minute, 48 Second

Last year I wrote an article about tools for auditing CSS. If you are a CSS lover, I bet you have heard some of those.

But did you know there is a tool called CSS Code Quality that is free to use and gives your CSS a score?

About the tool

CSS Code Quality is a tool made by Bart Veneman. As Bart says in his blog post, “think @____lighthouse, but for CSS specifically.”

How it works

After you submit either your URL or CSS code, you get the scores for the following:

  • maintainability,
  • complexity, and
  • performance.

The maximum score is 100. Like the Lighthouse tool, your code is doing great if you get the green scores.

Find out the quality of your CSS code

I wouldn’t mind seeing a legend telling you that 100 points are the maximum, though.

Score breakdown

For every test that fails, your score gets lower. You can see the results for each test in the score breakdown.

There are twenty different tests at the time of writing, from checking the usage of @import in your code to checking the number of declarations in a single ruleset.

If your code passes the test, the test will be marked green. Otherwise, if your code didn’t pass the test, the test will be marked orange or red, depending on how badly the code broke the test.

For example, the MDN site gets a red score for the “Avoid many Declarations in a single RuleSet” test because there is a ruleset with 106 declarations (!!). Similarly, the MDN site gets an orange score for “More than most common Selector Complexity” because 38.9% of selector complexities are more complex than most common.

Screenshot of CSS Code Quality score breakdown for MDN site.

It would be great if you could see these test fails highlighted in your CSS code somehow, but this information is helpful as it is already.

You could even download the results as a JSON file for future reference.

Conclusion

Writing good CSS is hard. At least now we could get a sense of how good or bad we are at it. So check CSS Code Quality today and improve your CSS!

#RespectCSS

Source: https://dev.to/starbist/find-out-the-quality-of-your-css-code-3f87

The 7 Most Popular DEV Posts from the Past Week Previous post The 7 Most Popular DEV Posts from the Past Week
Weekly web development resources #124 Next post Weekly web development resources #124

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.