Monitoring the Quality of CSS

CSS (Cascading Style Sheets) has gotten far more complex since it was introduced in the 1990s. I've used it on my web site and in various tools over the years, most recently with WebWorks ePublisher 2018. The latest update to that tool introduced SASS (Syntactically Awesome Style Sheets), which makes large projects much easier to work with but adds an extra layer of abstraction to deal with.

Not being a programmer, I wasn't aware of the existence of linters, tools that check the syntax and quality of programming code (which CSS is certainly now). As it turns out, there are linters for CSS.

We call these mistake-preventing programs "linters." JavaScript has several good ones. ESLint, in particular, has been working wonders, showing us all just how helpful a good linter can be. But in the realm of CSS we have not been so fortunate. We've had very limited options: the Ruby-based, preprocessor-specific scss-lint and the older CSS Lint.

But that was before the advent of PostCSS. Among other things, PostCSS provides the means to build more interoperable CSS tools. It can parse any CSS*-like* syntax into an Abstract Syntax Tree (AST) for plugins to analyze and manipulate. And with custom parsers, PostCSS can handle even non-standard, technically "invalid" patterns (like //-comments).

The conditions are ripe for a mighty new stylesheet linter — powered by PostCSS and inspired by the best features of scss-lint and ESLint.

I've been working with a few collaborators on this project, and I'm writing now to introduce you to the tool we've developed: stylelint.

I wish I'd known about this when I was working on my last WebWorks project. I spent a lot of time trying to figure out why my CSS wasn't doing what I thought it should be doing.

And more powerful CSS tools are being developed.

We’re constantly looking for ways to improve the way we write CSS: OOCSS, BEM, SMACSS, ITCSS, utility-first and more. But where other development communities seem to have progressed from just linters to tools like SonarQube and PHP Mess Detector, the CSS community still lacks tooling for deeper inspection than shallow lint rules. For that reason I have created Project Wallace, a suite of tools for inspecting and enforcing CSS quality.

At the core, Project Wallace is a group of tools that includes a command line interface, linter, analysis, and reporting.

That probably would have been overkill for what I was doing but it would have been interesting to play around with nonetheless. And the web developer who helped me out with one of the projects I worked on certainly would have liked it.