いくつか CSS の Linter を試してみたので、それぞれ自分のチェックしたいことができるのかを記録します。
やりたいこと
- ユニバーサルセレクタ使わないようにしたい
- ID にスタイルを適用しないようにしたい
-
js-プレフィクスが付いてる class にはスタイルを適用しないようにしたい - 複数のセレクタを指定する場合は
,の後で改行したい -
{の前には半角スペースを一つ入れたい、その後で改行したい - インデントは半角スペース 2 つにしたい
- プロパティの並びはアルファベット順にしたい
- プロパティの後、スペースを入れずに
:その後に半角スペースを 1 つ入れたい - 値が
0の時は単位をつけないようにしたい -
0.123は.123と、-0.456は-.456と表記したい - margin や padding など、ショートハンドを使える場合はショートハンドを使いたい
- 色の指定は 3 桁(
#fff)に短縮表記できる場合は短縮表記したい - 色は大文字ではなく小文字で書きたい (
: #FFF,
: #fff) -
!importantは使わない - プロパティの重複がないようにしたい
- 空のルールは削除したい
-
@importは使わないようにしたい - 謎のプロパティがあったら削除したい
- 値の後はスペースを入れず
;その後に改行したい - セレクタの頭と揃えて(プロパティの頭よりインデントを一つ浅くして)
}の後で改行したい
対応表
| # | やりたいこと | CSS Lint | stylelint | CSSComb |
|---|---|---|---|---|
| 1 | ユニバーサルセレクタ | universal-selector |
selector-no-universal |
|
| 2 | ID | ids |
selector-no-id |
|
| 3 |
js- プレフィクス |
|||
| 4 | 複数セレクタ , 後改行 |
selector-list-comma-newline-after |
space-after-selector-delimiter |
|
| 5 | 半角スペース -> { -> 改行 |
block-opening-brace-space-before block-opening-brace-newline-after
|
space-before-opening-brace space-after-opening-brace
|
|
| 6 | インデントは半角スペース * 2 | indentation |
block-indent |
|
| 7 | プロパティ アルファベット順 | rule-properties-order |
sort-order sort-order-fallback
|
|
| 8 | プロパティ -> : -> 半角スペース |
declaration-colon-space-before declaration-colon-space-after
|
space-before-colon space-after-colon
|
|
| 9 |
0 の時は単位をつけない |
zero-units |
number-zero-length-no-unit |
|
| 10 | 1 の位の 0 を省略 |
number-leading-zero |
unitless-zero |
|
| 11 | ショートハンド | shorthand |
||
| 12 | 色は短縮表記 | color-shorthand |
||
| 13 | 色は小文字 | color-hex-case |
color-case |
|
| 14 |
!important 使わない |
important |
declaration-no-important |
|
| 15 | プロパティの重複検出 |
duplicate-properties (※1) |
rule-no-duplicate-properties |
|
| 16 | 空のルール削除 | empty-rules |
block-no-empty |
remove-empty-rulesets |
| 17 |
@import 使わない |
import |
||
| 18 | 謎のプロパティ削除 | known-properties |
||
| 19 | 値 -> ; -> 改行 |
declaration-block-semicolon-space-before declaration-block-semicolon-newline-after
|
space-between-declarations (※2) |
|
| 20 | (セレクタの頭とインデント揃えて) } -> 改行 |
block-closing-brace-space-before block-closing-brace-newline-after
|
space-before-closing-brace |
- ※1) Disallow duplicate properties · CSSLint/csslint Wiki 値が違う場合は OK らしい
- ※2)
;の前に関するルールはなし
感想
- メンテナンス性を考えたルールを適用したい場合、 CSSComb は弱い、 CSSComb はやっぱり整形ツール
-
js-プレフィクスのついたクラスにスタイルをあてない、というルールは RECESS にはあったけど、今回評価した 3 つにはなかった - やりたいことすべてチェックするには複数のツールを使わなければいけないけど、、 CSS の Lint に複数のツールは使いたくない
- 今どれかを選ぶなら stylelint かしら