Stylelint: My CSS linting workflow

Having a good and most importantly uniform coding style is a good habit. Your code is more readable on more understandable.
– A coder

Before using a linter, I tried to follow as much as possible Harry Roberts CSS guidelines. At this time, I was almost certain that I had a standard way of writing and my CSS were perfectly formed.
But then, I ran a linter…

Caramba !
I forget spaces, semicolons were missing and a bunch of other things were wrong. In short, my terminal was blinking red. It was time to use a linter in my workflow !

Stylelint

During the last month, I started to work with PostCSS as my main pre/post-processor. In the PostCSS world, Stylelint is a well known tool to lint your stylesheets. Take a look at the features and you will understand why.

Instead of each time copy and paste my rule settings in every projects, I’ve created a stylelintrc repo that own my rule’s configuration file. You can find (and use) it on GitHub

Now, in every projects, I add this repo as a dependencie.

$ npm install @alienlebarge/stylelint-config

And then I set my linting task in Gulp.

var gulp = require("gulp")
var postcss = require("gulp-postcss")
var reporter = require("postcss-reporter")
var stylelint = require("stylelint")

gulp.task("lint:css", function () {
  return gulp.src("test/**/*.css")
    .pipe(postcss([
      stylelint({
        /* configFile: 'node_modules/alb-stylelintrc/.stylelintrc' */
      }),
      reporter({ clearMessages: true }),
    ]))
})

and Voilà ! Now everytime you run a build it will warn you if your CSS doesn’t follow the coding rules.