CSS の Lint ツール対応表


いくつか CSS の Linter を試してみたので、それぞれ自分のチェックしたいことができるのかを記録します。


## やりたいこと

1. ユニバーサルセレクタ使わないようにしたい
1. ID にスタイルを適用しないようにしたい
1. `js-` プレフィクスが付いてる class にはスタイルを適用しないようにしたい
1. 複数のセレクタを指定する場合は `,` の後で改行したい
1. `{` の前には半角スペースを一つ入れたい、その後で改行したい
1. インデントは半角スペース 2 つにしたい
1. プロパティの並びはアルファベット順にしたい
1. プロパティの後、スペースを入れずに `:` その後に半角スペースを 1 つ入れたい
1. 値が `0` の時は単位をつけないようにしたい
1. `0.123` は `.123` と、 `-0.456` は `-.456` と表記したい
1. margin や padding など、ショートハンドを使える場合はショートハンドを使いたい
1. 色の指定は 3 桁( `#fff` )に短縮表記できる場合は短縮表記したい
1. 色は大文字ではなく小文字で書きたい ( :x: : `#FFF` , :o: : `#fff` )
1. `!important` は使わない
1. プロパティの重複がないようにしたい
1. 空のルールは削除したい
1. `@import` は使わないようにしたい
1. 謎のプロパティがあったら削除したい
1. 値の後はスペースを入れず `;` その後に改行したい
1. セレクタの頭と揃えて(プロパティの頭よりインデントを一つ浅くして) `}` の後で改行したい


## 対応表

|#|やりたいこと|[CSS Lint](https://github.com/CSSLint/csslint/wiki/Rules)|[stylelint](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md)|[CSSComb](https://github.com/csscomb/csscomb.js/blob/master/doc/options.md)|
| --- | --- | --- | --- | --- |
|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](https://github.com/CSSLint/csslint/wiki/Disallow-duplicate-properties) 値が違う場合は OK らしい
- ※2) `;` の前に関するルールはなし


## 感想

- メンテナンス性を考えたルールを適用したい場合、 CSSComb は弱い、 CSSComb はやっぱり整形ツール
- `js-` プレフィクスのついたクラスにスタイルをあてない、というルールは [RECESS](https://twitter.github.io/recess/) にはあったけど、今回評価した 3 つにはなかった
- やりたいことすべてチェックするには複数のツールを使わなければいけないけど、、 CSS の Lint に複数のツールは使いたくない
- 今どれかを選ぶなら stylelint かしら


## 参考サイト

- [Rules · CSSLint/csslint Wiki](https://github.com/CSSLint/csslint/wiki/Rules)
- [stylelint/rules.md at master · stylelint/stylelint](https://github.com/stylelint/stylelint/blob/master/docs/user-guide/rules.md)
- [csscomb.js/options.md at master · csscomb/csscomb.js](https://github.com/csscomb/csscomb.js/blob/master/doc/options.md)