CSS LINT

WebデザイナやWebデベロッパの多くはCSSの記述や微調整に多くの時間を費やした経験があるだろう。CSSは肥大化するにつれ編集が難しくなり、さらに多くの時間を必要とするようになる。チェックツールを通じてCSSを常に健全な状態に保つことができれば、こうした開発や編集における手間を削減しやすくなる。

こうした場合に利用できるチェックツールがNicholas C. Zakas氏およびNicole Sullivan氏より発表された。「CSS Lint」だ。Webアプリケーションとしても提供がはじまったためブラウザからオンラインでCSSのチェックを実施できるほか、Node.jsで動作するスクリプトとして提供されているのでダウンロードしてきて手元で動作させることもできる。現状のCSS Lintで利用されているチェック規則は次のとおり。

  • パースエラー検出
  • 隣接クラスは使用禁止
  • ルールが表記されていない空記述は禁止
  • displayに対して正しいプロパティを指定すること
  • floatをたくさん使用しない
  • Webフォントをたくさん使用しない
  • フォントサイズ定義をたくさん指定しない
  • セレクタではIDを指定しない
  • 見出しを装飾しない
  • 見出しのスタイル指定は1度のみ
  • width: 100%の指定は慎重に実施する
  • ゼロ値に対しては単位指定不要
  • ベンダプレフィックスプロパティを使う場合は標準プロパティも併記する必要がある
  • CSSグラデーションを指定する場合すべてのベンダプレフィックスプロパティを併記する必要がある
  • 正規表現を使ったセレクタは避けるべき
  • おかしなボックスモデルに注意する

Webアプリケーションとしても提供されているCSS Lint

テキストエリアにCSSを貼り付けて「LINT!」ボタンを押すと解析が実施され、結果が報告される

11のワーニングが検出されたと説明があり、それぞれの問題点が指摘されている

CSSのどの部分に問題があるのか色付けで指示される

規則そのものはプラグインの形で記述されており、利用するに当たって使いにくいルールがあれば取り外すことが可能。または独自のルールを追加して利用することもできる。