Share

こんにちわ。升田です。

年末にかけて、急に寒くなった影響でずっと体調が悪かったですが、新年に入ってからはボチボチ調子を取り戻してきました。

本年もよろしくお願いします。

今回もみんな大好きgulpを使ってCSSのチェックをしてくれるgulp-csslintを紹介したいと思います。

gulp-cssintとは?

CSSの文法をチェックしてくれる仕組みです。
CSSで誤った記述をしているとうまくスタイルが反映されません。
その原因を探すのは結構面倒だったりします。
そこで活躍してくれるのが今回紹介するgulp-csslintです。

これを使えば、以下のようなメリットがあります。

・おかしな文法、箇所を注意してくれる
・無駄なコードを削除することができる
・CSSの書き方を矯正できる

ちなみに、「Lint」とは、日本語で「糸くず」という意味です。

糸くずみたいな小さなものがコードの邪魔している感じでしょうか。。

早速CSSLintを使ってみよう

今回のディレクトリはこんな感じです。

gulpfile.js 
  node_modules 
  package-lock.json 
  package.json 
  dest     //出力先フォルダ
   └  css
       └ index.css
  dev       //開発フォルダ
   └  scss
       └ index.scss

Lintに通すCSSはこんな感じです。
※わざとエラーが出るような書き方をしています。

.test{}

.test2{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.test3{
  heigth: 100px;
}

.test4{
  padding: 0px;
}

Gulpを準備

例の如く、npmで必要なパッケージをダウンロードしていきます。

npm init

npm i -D gulp gulp-csslint gulp-csslint-report

gulp-csslintは、gulp用のcsslint。
gulp-csslint-reportはエラーがあった場合、logsフォルダにhtmlファイルを出力してくれます。

gulpfile.jsを編集

const gulp = require('gulp');
const csslint = require('gulp-csslint');
const cssreport = require('gulp-csslint-report');

gulp.task('lint',()=>{
    return gulp.src('./dev/scss')
    .pipe(csslint())
    .pipe(cssreport())
    .pipe(gulp.dest('./dest/css'))
});

gulp-csslint、実行!

ではコマンドを実行します。

gulp lint

するとターミナルには下記のように表示されます。

[00:00:00] Using gulpfile ~/Desktop/gulp-test/gulpfile.js
[00:00:00] Starting 'lint'...
[00:00:00] 5 lint errors in index.css
[00:00:00] Finished 'lint' after 87 ms

5つのエラーがあると表示されています。

では実際にどの部分かみてみましょう。
logsフォルダに出力される「csslint-report.html」をみてみると、index.css内で検知したエラーの一覧が表示されています。

1    1    Rule is empty.
3    1    Rule doesn’t have all its properties in alphabetical order.
3    1    The properties margin-top, margin-bottom, margin-left, margin-right can be replaced by margin.
11    3    Unknown property ‘heigth’.
15    12    Values of 0 shouldn’t have units specified.

※左から、Line Column Message の順で表示されます。

1.CSSの設定がされていない
2.プロパティの順番がアルファベット順じゃない
3.margin-topなど、個別で指定しているものをまとめてmarginで指定できる
4.’heigth’というプロパティはない
5.値が0の場合、単位を指定しない

今回はデフォルト設定で使用してみましたが、1.は基本的にないと思います。2.もアルファベット順ではなく、プロパティ順に並べることが多いので、設定を変更して出力しないようにします。

const gulp = require('gulp');
const csslint = require('gulp-csslint');
const cssreport = require('gulp-csslint-report');

const lintOption = {
    "empty-rules": false,
    "order-alphabetical": false,
}

gulp.task('lint',()=>{
    return gulp.src('./dev/scss')
    .pipe(csslint(lintOption))
    .pipe(cssreport())
    .pipe(gulp.dest('./dest/css'))
});

オプションを2つ追加しました。

これで実行してみます。
出力結果はこちら。

3    1   The properties margin-top, margin-bottom, margin-left, margin-right can be replaced by margin.
11    3   Unknown property 'heigth'.
15    12  Values of 0 shouldn't have units specified.

これで不要な設定をオフにできました。

この他にもオプションはたくさんあります。
基本的に全て初期値は全てtrueなので、必要に応じてfalseにして設定を変更しましょう。
下記にまとめてみました。


adjoining-classes:セレクタでclassを連結して記述していないかチェック。

box-model:widthやheightとborderやpaddingが一緒に指定されていないかチェック。

box-sizing:box-sizingを使用していないかチェック。

bulletproof-font-face:@font-faceで古いIE用の対策をしているかチェック。

compatible-vendor-prefixes:ベンダープレフィックスで指定漏れがないかチェック。

empty-rules:プロパティを含まない空のルールがないかチェック。

display-property-grouping:displayと合わせて無効になるプロパティを設定していないかチェック。

duplicate-background-images:同じ背景画像を複数のclassで使用していないかチェック。

duplicate-properties:重複したプロパティが別の箇所で指定されていないか、また重複したプロパティと値を指定していないかチェック。

fallback-colors:CSS3で追加された色指定でフォールバックを指定しているかチェック。

floats:floatを多用していないかチェック(10回以上使用でエラー)。

font-faces:Webフォントを多用していないかチェック(6つ以上の読み込みでエラー)。

font-sizes:font-sizeの指定が多くないかチェック(10個以上の指定でエラー)。 

gradients:グラデーションで指定漏れがないかチェック。 

ids:セレクタでIDを指定していないかチェック。

import:@importを使用していないかチェック。

important:!importantを使用していないかチェック。 

known-properties:存在しないプロパティを指定していないかチェック。 

order-alphabetical:プロパティがアルファベット順に並んでいるかチェック。 

outline-none:outlineを消していないかチェック(ただし、:focusでoutline削除となんらかのプロパティを指定している場合は許容)。 

overqualified-elements:セレクタで要素とclassを一緒に指定していないかチェック。

qualified-headings:hXタグをページ個別で設定しようとしていないかチェック。

regex-selectors:正規表現を使ったセレクタ指定をしていないかチェック。

shorthand:ショートハンドでまとめられるプロパティがないかチェック。

star-property-hack:スターハックでの指定がないかチェック。

text-indent:マイナス値のtext-indentでテキストを隠していないかチェック。

underscore-property-hack:アンダースコアハックでの指定がないかチェック。

unique-headings:hXタグを複数回設定しようとしていないかチェック。

universal-selector:ユニバーサルセレクタでの指定がないかチェック。

unqualified-attributes:修飾されていない属性セレクタを使っていないかチェック。

vendor-prefix:ベンダープレフィックスと合わせて標準プロパティを指定しているかチェック。

zero-units:値が0のものに単位をつけていないかチェック。

bulletproof-font-faceやunderscore-property-hackは古いIE対策ですが、僕は使ったことがないので、常にfalseにしています。

上記を踏まえて、僕は下記の設定をベースにしてコーディングを行っています。

const gulp = require('gulp');
const csslint = require('gulp-csslint');
const cssreport = require('gulp-csslint-report');

const lintOption = {
   "adjoining-classes": false,
    "box-model": false,
    "box-sizing": false,
    "bulletproof-font-face": false,
    "compatible-vendor-prefixes": false,
    "duplicate-background-images": false,
    "fallback-colors": false,
    "font-sizes": false,
    "gradients": false,
    "ids": false,
    "import": false,
    "important": false,
    "order-alphabetical": false,
    "outline-none": false,
    "qualified-headings": false,
    "regex-selectors": false,
    "shorthand": false,
    "star-property-hack": false,
    "underscore-property-hack": false,
    "unique-headings": false,
    "universal-selector": false,
    "unqualified-attributes": false,
    "vendor-prefix": false,
}

gulp.task('lint',()=>{
    return gulp.src('./dev/scss')
    .pipe(csslint(lintOption))
    .pipe(cssreport())
    .pipe(gulp.dest('./dest/css'))
});

まとめ

gulp-csslintを使うと、簡単にcssのバリデーションを行うことができます。
今まで紹介したものと組み合わせると、

sassコンパイル→ベンダープレフィクス付与→バリデーションチェック

の一連の流れを自動化することができます。

またgulpのwatchタスクを組み合わせると、ファイル変更のたびに処理を走らせることができます。
次回以降、この辺りもまとめてみたいと思います。

株式会社 ヤップ エンジニア

升田 圭亮

ヤップのコーディング、プログラミング担当。日々学んだことを発信。

記事中の画像データを使いたい!や、この記事もっと詳しく書いて欲しいなどのご要望、ご意見は上記お問合せをクリック、もしくはお電話ください。

06-6445-7317