Help us understand the problem. What is going on with this article?

CSS の Lint ツール対応表

More than 3 years have passed since last update.

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

やりたいこと

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

対応表

# やりたいこと 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

感想

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

参考サイト

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away