サイト制作に関するメモ書き

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

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());
});

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

adjoining-classes セレクタでclassを連結して記述していないかどうか。
初期値はtrue。
box-model widthやheightとborderやpaddingが一緒に指定されていないかどうか。
初期値はtrue。
box-sizing box-sizingを使用していないかどうか。
初期値はtrue。
bulletproof-font-face @font-faceで古いIE用の対策をしているかどうか。
初期値はtrue。
compatible-vendor-prefixes ベンダープレフィックスで指定漏れがないかどうか。
初期値はtrue。
empty-rules プロパティを含まない空のルールがないかどうか。
初期値はtrue。
display-property-grouping displayと合わせて無効になるプロパティを設定していないかどうか。
初期値はtrue。
duplicate-background-images 同じ背景画像を複数のclassで使用していないかどうか。
初期値はtrue。
duplicate-properties 重複したプロパティが離れた行で指定されていないかどうか、また重複したプロパティと値を指定していないかどうか。
初期値はtrue。
fallback-colors CSS3で追加された色指定でフォールバックを指定しているかどうか。
初期値はtrue。
floats floatを多用していないかどうか(10回以上使用でエラー)。
初期値はtrue。
font-faces Webフォントを多用していないかどうか(6つ以上の読み込みでエラー)。
初期値はtrue。
font-sizes font-sizeの指定が多いとエラー(10個以上の指定でエラー)。
初期値はtrue。
gradients グラデーションで指定漏れがないかどうか。
初期値はtrue。
ids セレクタでIDを指定していないかどうか。
初期値はtrue。
import @importを使用していないかどうか。
初期値はtrue。
important !importantを使用していないかどうか。
初期値はtrue。
known-properties 存在しないプロパティを指定していないかどうか。
初期値はtrue。
order-alphabetical プロパティがアルファベット順に並んでいるかどうか。
初期値はtrue。
outline-none outlineを消していないかどうか(ただし、:focusでoutline削除となんらかのプロパティを指定している場合は許容)。
初期値はtrue。
overqualified-elements セレクタで要素とclassを一緒に指定していないかどうか。
初期値はtrue。
qualified-headings hXタグをページ個別で設定しようとしていないかどうか。
初期値はtrue。
regex-selectors 正規表現を使ったセレクタ指定をしていないかどうか。
初期値はtrue。
shorthand ショートハンドでまとめられるプロパティがないかどうか。
初期値はtrue。
star-property-hack スターハックでの指定がないかどうか。
初期値はtrue。
text-indent マイナス値のtext-indentでテキストを隠していないかどうか。
初期値はtrue。
underscore-property-hack アンダースコアハックでの指定がないかどうか。
初期値はtrue。
unique-headings hXタグを複数回設定しようとしていないかどうか。
初期値はtrue。
universal-selector ユニバーサルセレクタでの指定がないかどうか。
初期値はtrue。
unqualified-attributes 修飾されていない属性セレクタを使っていないかどうか。
初期値はtrue。
vendor-prefix ベンダープレフィックスと合わせて標準プロパティを指定しているかどうか。
初期値はtrue。
zero-units 値が0のものに単位をつけていないかどうか。
初期値はtrue。

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

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());
});

 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP