gulp-csslintでCSSのバリデーションを行う

少し前にHTMLのバリデーションの記事を書きましたが、今回はgulp-csslintを使ってCSSのバリデーションを試してみます。

設定方法

プロジェクトディレクトリに移動します。

cd 【プロジェクトディレクトリ】

package.jsonを作成します。

npm init

gulpとgulp-csslintをインストールします。

npm install gulp gulp-csslint --save-dev

プロジェクトルートにgulpfile.jsを作成して、以下のように記述します。

gulpfile.js

var gulp     = require('gulp'),
    csslint  = require('gulp-csslint');

gulp.task('css', function() {
  return gulp.src('htdocs/css/**/*.css')
  .pipe(csslint())
  .pipe(csslint.formatter());
});

/htdocs/css/ディレクトリ内のCSSファイルに対してバリデーションを行う想定です。
実際に/htdocs/css/ディレクトリを作成して、その中にstyle.cssを作成してみます。

htdocs/css/style.css

.sample {
  widgh: 100px;
  margin-bottom: 0px;
}
.sample2 {}

バリデーションのタスクを実行します。

gulp css

以下のようにエラーが表示されました。

csslint: There are 4 problems in /XXXXXXX/htdocs/css/style.css.

style.css
1: warning at line 1, col 1
Rule doesn't have all its properties in alphabetical order.
.sample {

style.css
2: warning at line 2, col 3
Unknown property 'widgh'.
  widgh: 100px;

style.css
3: warning at line 3, col 18
Values of 0 shouldn't have units specified.
  margin-bottom: 0px;

style.css
4: warning at line 5, col 1
Rule is empty.
.sample2 {}

今回出ているエラーは以下の内容になります。

• プロパティがアルファベット順でない(5行目)
• 不明なプロパティがある(10行目)
• 0の値に単位がついている(15行目)
• 空のルールがある(20行目)

エラーの出ている部分を一部修正してみます。

.sample {
  width: 100px;
  margin-bottom: 0;
}

再度タスクを実行します。

gulp css

プロパティの順番以外のエラーが解消されました。

csslint: There is 1 problem in /XXXXXXX/htdocs/css/style.css.

style.css
1: warning at line 1, col 1
Rule doesn't have all its properties in alphabetical order.
.sample

ルールの変更

設定されているルールの一部を使用しないように変更することもできます。
以下コードの7〜38行目が設定できる項目で、基本的に初期値はtrueになっているようです。

var gulp     = require('gulp'),
    csslint  = require('gulp-csslint');

gulp.task('css', function() {
  return gulp.src('htdocs/css/**/*.css')
  .pipe(csslint({
    "adjoining-classes": true,
    "box-model": true,
    "box-sizing": true,
    "bulletproof-font-face": true,
    "compatible-vendor-prefixes": true,
    "empty-rules": true,
    "display-property-grouping": true,
    "duplicate-background-images": true,
    "duplicate-properties": true,
    "fallback-colors": true,
    "floats": true,
    "font-faces": true,
    "font-sizes": true,
    "gradients": true,
    "ids": true,
    "import": true,
    "important": true,
    "known-properties": true,
    "order-alphabetical": true,
    "outline-none": true,
    "overqualified-elements": true,
    "qualified-headings": true,
    "regex-selectors": true,
    "shorthand": true,
    "star-property-hack": true,
    "text-indent": true,
    "underscore-property-hack": true,
    "unique-headings": true,
    "universal-selector": true,
    "unqualified-attributes": true,
    "vendor-prefix": true,
    "zero-units": true
  }))
  .pipe(csslint.formatter());
});

それぞれの内容は以下の通りです。

先ほどの例の続きで、プロパティがアルファベット順でなくてもいいようにルールを変更してみます。

var gulp     = require('gulp'),
    csslint  = require('gulp-csslint');

gulp.task('css', function() {
  return gulp.src('htdocs/css/**/*.css')
  .pipe(csslint({
    "order-alphabetical": false
  }))
  .pipe(csslint.formatter());
});

これで先ほどの例でエラーが表示されなくなりました。

場合にもよりますが、個人的には以下のような設定をベースに案件によって調整する形にしようと思います。

var gulp     = require('gulp'),
    csslint  = require('gulp-csslint');

gulp.task('css', function() {
  return gulp.src('htdocs/css/**/*.css')
  .pipe(csslint({
    "adjoining-classes": false,
    "box-model": false,
    "box-sizing": false,
    "bulletproof-font-face": false,
    "compatible-vendor-prefixes": false,
    "empty-rules": true,
    "display-property-grouping": true,
    "duplicate-background-images": false,
    "duplicate-properties": true,
    "fallback-colors": false,
    "floats": false,
    "font-faces": false,
    "font-sizes": false,
    "gradients": false,
    "ids": false,
    "import": false,
    "important": false,
    "known-properties": true,
    "order-alphabetical": false,
    "outline-none": false,
    "overqualified-elements": true,
    "qualified-headings": false,
    "regex-selectors": false,
    "shorthand": false,
    "star-property-hack": false,
    "text-indent": false,
    "underscore-property-hack": false,
    "unique-headings": false,
    "universal-selector": false,
    "unqualified-attributes": false,
    "vendor-prefix": false,
    "zero-units": true
  }))
  .pipe(csslint.formatter());
});

【参考サイト】

• gulp-csslint – npm
• Home · CSSLint/csslint Wiki · GitHub