An Intro to CSS Testing with SonarQube

The following is a guest post by David Racodon. David contributes to this open source code quality tool he’ll tell you all about. I hadn’t heard of it until now, but I know there are lots of folks out there interested in tooling to help keep their CSS in check. This is a bit like CSS lint but formalized into an interface that handles code quality for a whole project.

The quality of CSS tends to degrade over time. You start a new project and it’s squeaky clean. But, slowly, over changes and maintenance, technical debt adds up. It gets even worse with projects with many different maintainers or employee turnover.

The vast majority of CSS developers I’ve met do care about their code cleanliness, and also feel like they could be doing a better job.

I work on and with a tool called SonarQube, which is specifically for developer to improve code quality.

What is SonarQube?

SonarQube provides feedback on code quality for a wide range of languages including CSS. A web interface provides an overview of your project code quality.

From there, you can drill down and SonarQube can show you problem inline directly in the code, such as potential bugs like duplicated properties:

Or duplicated selectors across files:

Or any other of the developers’ seven deadly sins.

There’s a demo of these features that you can check out, too.

Where to start? New code.

What if you analyzed your code right now? If you’re lucky, you’ll only have a few dozen issues. But what if you have a few hundred? What should you start working on then? Let’s frame it another way. If your bathtub has a leak, would you first start mopping the floor or would you try and fix the leak first? I believe (or at least I hope) that most of you would try to fix the leak first.

SonarQube provides what you need to focus on new code: the differential views. They allow you to compare the current state of your code to a previous state.(A previous state might be the last analysis, the beginning of the sprint, a version in production, etc.) and highlight new issues.

In the example above, you would just click on +9 to display the 9 new issues introduced since the last analysis and start fixing them.

What sort of CSS checks does it perform?

Over 50 are available at the moment. Here’s just a few examples:

Potential bugs:

• Duplicated properties: Bad copy paste? Intended for cross-browser support? A comment would be nice in this case though
• Property value should be valid otherwise they will just be ignored by browsers. Not just a basic CSS2 validator, it also takes into account CSS3 and values commonly accepted by browsers. See the full list of validators.

Coding guidelines

• Selectors should follow a naming convention
• Units for zero values should be removed
• Stylesheets should not contain too many rules

Cross-browser compatibility

• Standard properties should be specified along with vendor-prefixed properties
• Deprecated system colors should not be used

Trying it

SonarQube is open source and free. To get your code analyzed in less than two minutes, a SonarQube package bundled with the CSS plugin and the analyzer can be downloaded here (see the Download ZIP on the right hand side).

Or, see the in depth documentation.

Learning more

Convinced? Go further by automating the analysis of your code with your favorite continuous integration service. There are also plugins for JavaScript, HTML, and other languages. You can use it to review issues, evaluate your technical debt, and many more.

Feedback on the CSS plugin

Along with Tamas Kende, I contribute to the SonarQube CSS plugin. We’re not exactly CSS gurus and we’re sure that the existing rules could be improved and new rules could be added. Your feedback is more than welcome! Post to the SonarQube user group or ping us on twitter at @kalidasya and @DavidRacodon.