csste.st

CSS Lint for syntax checks

The easiest way to get started with automated testing is to have your stylesheets syntax checked before committing.

To do this, we'll use CSS lint.

What does it do?

First, try out CSS Lint online at csslint.net. Here, we've disabled most of the extended style checks so that it simply returns warnings and errors based on syntax. We can figure out the rest later.

Just in case you don't have any CSS of your own lying around (unlikely but possible), you can copy-paste this into the big white box to check it out:

nav {
  position: absolute;
  top: 0;
  left: 50%;
  paddling: 250px;
}
nav ul {
  background: #red;
}

You should see that we have one syntax error and two warnings (potential errors). Good.

We won't fix that error just now, it'll be handy to test that we've got our stuff working.

Download and install

Rather than repeat the instructions for downloading CSS Lint, it's best to follow the official guide:

Running from the command line

If you've followed the installation instructions, you should now be able to run csslint from the command line.

Open a terminal or command window and try it

csslint

You should see the following

Usage: csslint-rhino.js [options]* [file|dir]*

Global Options
  --help                                Displays this information.
  --format=                     Indicate which format to use for output.
  --list-rules                          Outputs all of the rules available.
  --quiet                               Only output when errors are present.
  --errors=               Indicate which rules to include as errors.
  --warnings=             Indicate which rules to include as warnings.
  --ignore=               Indicate which rules to ignore completely.
  --exclude-list= Indicate which files/directories to exclude from being linted.
  --version                             Outputs the current version number.

Now, we need to run it against our test file.

Create a file with our sample CSS above and open a terminal in the same directory.

csslint test.css

The output should now be the same as we saw on the website:

csslint: There are 3 problems in test.css.

test.css
1: warning at line 5, col 3
Unknown property 'paddling'.
  paddling: 250px;

test.css
2: warning at line 7, col 1
Rule is empty.
nav ul {

test.css
3: error at line 8, col 15
Expected a hex color but found '#red' at line 8, col 15.
  background: #red;

Cool. We've just got one more step to go: automating.