SCSS-Lintの設定を煮詰めていた。読みやすさと書きやすさを優先して、他はCSS Lintでのチェックに先延ばししたり、CSS圧縮ツールなどによる自動処理に期待するような形に落ち着いた。そうすることでちょくちょくチェックかけてもストレスがたまらないようにできた。
Download: scss-lint.yml
SCSS-Lintでは実行したディレクトリーと上流のディレクトリー全部から.scss-lint.ymlを探してくれるので、このファイルをユーザー・ディレクトリーなどプロジェクト・ディレクトリーの上流に置いておくとデフォルトの設定にすることができる。以下にデフォルトから変更したオプションと、その変更した理由を簡単に記しておく。
デフォルトで//の行コメントしか許可されないので、残したいコメントがまったく書けなくなるため無効にした。ライセンス表記を残せなくなることもそうだが、ソース・マップで非圧縮のCSSを参照してるケースなどでコメントを残したいことも考慮した。
ピリオド始まりの小数点の数字は読める気がしないので無効にした。圧縮ツールに任せるべきだろう。
デフォルトでは小文字アルファベットとハイフンしか許可されないので、BEM記法ライクな変数が使えなくなる。BEM記法とみなすオプションも用意されているが、途中で_をひとつだけ使うことが出来ないような正規表現になっていたので制限が厳しい。大文字も使えないので、この正規表現をパスする変数名書くのはかなりの忍耐力を要する。
簡単な正規表現(^[a-z][-a-z0-9_]*$)で大文字を不可にする程度に止めた。
デフォルトでネストできるものはとにかくネストするように警告されるようになっている。その場合、構造としてはネストできる関係にあってもあまり関連性のないセレクター同士を分けることが出来ない。そのためforce_nestingオプションだけを無効にした。
プレースホルダー・セレクターのみしか@extendできないように制限されているのを無効にした。必ずプレースホルダー・セレクターを作るというのも悪くないルールだが、冗長すぎるため直接@extendすることもあり、その場合このチェックが足を引っ張ることになる。
プロパティーの順序チェックは無効にした。アルファベット順で書くとgzip効果が高いなどという調査結果は確かにあるが、1%にも満たない効率化であったりする。やるとしても圧縮ツールがやるべきことで、リンターの領分ではない。
プロジェクトごとに決められたソート順(アルファベット順ではない何か)はあると助かることはあるので、プロジェクト・ローカルで何かしら設定するのは悪くない。
セレクターの部品が4つ以上書けなくなるこのオプションが有効だと、ペライチのページなどで構造に依存したセレクターがまったく通らなくなるため、無効にした。どういうルールでセレクターを書くかはプロジェクトの規模や保守期間に大きく依存するので、グローバルでは無効にした方が無難だろう。
簡略(ショートハンド)プロパティーでできうる限り省略するように警告されるが、これも圧縮ツールの領分だと思うので無効にした。
CSSでの引用符には二重引用符を使っているので無効にした。引用符の出現頻度の低いCSSでは一重引用符のメリットは微妙で、二重引用符の認識性が勝るのではないかと思う。
SCSS-Lintは多分Sassの圧縮機能のみでCSSをビルドすることを前提に作られているのだと思う。そのため圧縮ツールの領分にもわけいったようなオプションが多く存在する。Sassの圧縮機能はそれほど頑張るものではないので、そうなっているのは自然だとも言える。しかし、そういったルールは書きやすさや読みやすさに悪い影響を与える。
SassはCSSの貧弱な構文を強化して書きやすく・読みやすくするツールなので、そういった点に悪影響を与えることは本末転倒と言える。また最近はGruntやgulpなどで圧縮ツールを含めた色々なツールへ流してビルドするパターンの方が多いことも考慮すると、書きやすさや読みやすさを犠牲にした簡略化をコーディング・レベルで行わせるようなルールは不要だと考えられる。
いずれにしろSCSS-Lintだけで良いCSSを生成することはできない。その辺りを考慮して、チェックする頻度の高いSCSS-Lintではゆるめに、デプロイ前のCSS Lintでは厳しめにするというように、開発フロー全体でバランスをとることを考えて設定すると良い。