いくつか 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 かしら

やりたいこと

対応表

感想

参考サイト