How to lint your CSS stylesheets with Stylelint

When working with CSS, developers usually don’t think about running a linter on the stylesheets. We usually use linters on C or C++ or JavaScript codebases but we don’t often think about whether or not it’s even possible to lint a CSS stylesheet and enforce certain coding standards and rules on it. With Stylelint, you can lint your CSS and make sure it’s in line with common standards, more powerful than that is writing your own stylelint rules.

I sat down and read through the stylelint guide on writing plugins and rules and came up with a basic example that other developers can build upon.

The custom stylelint rule will detect whether the “visibility” property is being used. In most codebases it isn’t used, so I thought it would be a safe enough example that anyone can run.

How To Create a Stylelint Plugin or Rule

The instructions for writing your own plugins and rules are in the Stylelint Developer Guide:

It didn’t take very long to write a few more rules for stylelint and the linter immediately found a lot of coding standard violations that made our CSS inconsistent. After fixing the rules, the code was cleaner and more consistent and developers could worry about higher-level concerns.

I really enjoyed using stylelint and will be using it for future projects whenever possible.