Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
8
Help us understand the problem. What is going on with this article?
@kyokutyo

CSS の Lint ツール対応表

More than 5 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 かしら

参考サイト

8
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
kyokutyo

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
8
Help us understand the problem. What is going on with this article?