Using Stylelint to Magically Improve Your CSS

Stylelint is a great tool for improving your CSS. Not only can you use it to lint (which I recently described as checking the grammar of your code) but you can also use it to fix your code to make it both standards-compliant and also able to run effectively.

I don’t always like doing non-valid tutorial stuff, so I am working directly with the CSS on this site to improve it.

Docker Stylelint

Whether you knew or not, I made a Docker Image with Stylelint which makes the process of adding Stylelint (provided you have Docker) as easy as a single command.

Stylelint-ing your CSS

The CSS for this experiment is pulled directly from this site how I originally wrote it:

.point__media img {
  max-height: 160px;
}

.text-container a {
  text-decoration: underline;
  color: #48769f;
}

.text-container a:hover {
  color: #489f77;
  transition: all 1500ms ease;
}

.navbar__logo img {
  max-height: 35px;
  background-color: white;
  padding: 3px 15px;
  border-radius: 20px;
}

h1 code, h2 code, h3 code, p code {
  background-color: aliceblue;
  border: solid 1px #eee;
  font-size: 0.8em;
  padding: 0 2px
}

Running Stylelint (from Docker) gives you this:

$  docker run --rm -it -v $(pwd):/app willhallonline/stylelint:10-alpine stylelint.css

stylelint.css
 12:31  ✖  Unexpected whitespace at end of line                no-eol-whitespace
 12:32  ✖  Expected newline before "}" of a multi-line block   block-closing-brace-newline-before
 22:8   ✖  Expected newline after ","                          selector-list-comma-newline-after
 22:17  ✖  Expected newline after ","                          selector-list-comma-newline-after
 22:26  ✖  Expected newline after ","                          selector-list-comma-newline-after
 26:16  ✖  Expected a trailing semicolon                       declaration-block-trailing-semicolon
 27:1   ✖  Unexpected missing end-of-source newline            no-missing-end-of-source-newline

--- Stylelint Complete ---

As you can see, Stylelint has found a bunch of errors there, but nothing too complex.

Fixing Your CSS with Stylelint –fix

Stylelint includes a function to fix the CSS dependant on your rules. This can be applied simply by adding --fix to the command as show below:

$  docker run --rm -it -v $(pwd):/app willhallonline/stylelint:10-alpine --fix stylelint.css
--- Stylelint Complete ---

Now that is complete lets look at the code stylelint has just made for us:

.point__media img {
  max-height: 160px;
}

.text-container a {
  text-decoration: underline;
  color: #48769f;
}

.text-container a:hover {
  color: #489f77;
  transition: all 1500ms ease;
}

.navbar__logo img {
  max-height: 35px;
  background-color: white;
  padding: 3px 15px;
  border-radius: 20px;
}

h1 code,
 h2 code,
 h3 code,
 p code {
  background-color: aliceblue;
  border: solid 1px #eee;
  font-size: 0.8em;
  padding: 0 2px;
}

Diff-ing the changes that have been made:

$  diff stylelint-old.css stylelint.css
12c12
<   transition: all 1500ms ease;
---
>   transition: all 1500ms ease;

22c22,25
< h1 code, h2 code, h3 code, p code {
---
> h1 code,
>  h2 code,
>  h3 code,
>  p code {

26c29
<   padding: 0 2px
---
>   padding: 0 2px;

So, you can see it made 3 changes (I realise that fundementally it made more, but it is easier to understand 3 changes).

Summary

So, as you can see, it is super easy to be able to improve the function and form of your CSS (and LESS/SASS, Stylelint works with that too).