stylelint-config-standard 読書会 #1

いま仕事で取り組んでるプロジェクトのスタイルシートは、これまでにたぶん 10 人以上が触ってきたらしいってことは、 GitHub の contributors からなんとなくわかるんだけど… メンテナンスしやすいソースコードには一貫性が大事だから、いろんな人の書き方が入り乱れてしまっているのをなんとかしたいなって思った。

そう思ったとき、スタイルシートには stylelintstylefmt って便利なツールが用意されている。 stylelint は lint のツールで、スタイルシートが指定したルールに沿って書かれているかどうかを確認できる。 stylefmt は、 stylelint で指定したルールの通りになっていないソースコードがあったら、沿うように直してくれる。なんて便利なんだろうか(stylefmt の作者の @morishitter_ さんは、 stylelint で –fix オプションが開発されるのでそろそろ終了するかもと ツイートしてる けども…)。

stylelint は、ほんとうにきめ細かなルールを指定ができるのだけど、インストールしただけではなんのルールも指定されていない。プロジェクトに沿うように自分でひとつずつルールを指定していってもいいんだけど、ここでさらに便利なのは stylelint-config-standard という stylelint のルール集が公開されていて、これは README.md によると The Idiomatic CSS Principles, GitHub’s PrimerCSS Guidelines, Google’s CSS Style Guide, Airbnb’s Styleguide, and @mdo’s Code Guide のルールをいいとこどりしているらしい。なんて便利で最強なんだろうか…。

というわけで stylelint-config-standard を指定して一括で直しちゃえばいいじゃんって感じなのだけど、そもそもいろんなフレームワークやサービスで良しとされているルールってなんだろうと興味深くなって、 stylelint-config-standard で指定されているルールを上から 1 行ずつ読んでいくことにしました。

stylelint-config-standard の Latest release になっている 16.0.0 を見る。 index.js にルールが json で指定されている。

stylelint で指定できるルールは、公式サイトで詳しく解説されている。

なんと、丁寧にも日本語訳してくれている人たちもいるので、参考にさせていただく。

それでは見ていくぞ〜


"at-rule-empty-line-before": "always"

Require or disallow an empty line before at-rules.

at-rule-empty-line-before

a {}

@media {}

@ルールの前に 1 行空けることを必須にするかどうか。たとえば Media Queries でルールセットのなかに @media { ... } みたいな入れ子のルールセットを書くときに、直前の行を 1 行空けることのポリシーを指定できる。ここでは always だから、いつも空けること。ちなみに never なら詰めることを示す。

ここでは、さらに exceptignore が指定されている。

except: "blockless-after-same-name-blockless"

これ、よく意味がわからなかった… あとで調べよう。

except: "first-nested"

ルールセットのなかで最初の@ルールは、ルールセットの開始の { とのあいだに空行がないようにする… ってことでいいのかな?

ignore: "after-comment"

@ルールの前の行が CSS のコメントのときはチェックしない… ってことなんだろうか。

英語がまったくわからないのでやばい!


"at-rule-name-case": "lower"

Specify lowercase or uppercase for at-rules names.

at-rule-name-case

@charset 'UTF-8';

@ルールの @charset@media などの名前を小文字で書くか大文字で書くかを指定できる。ここでは lower だから、ローワーケースということで小文字。ちなみに upper なら大文字。


"at-rule-name-space-after": "always-single-line"

Require a single space after at-rule names.

at-rule-name-space-after

@media (min-width: 700px) {}

@ルールの @charset@media などの名前のあとに半角スペースを空けるか、半角スペースを空けた上で 1 行に収めるかどうかを指定できる。ここでは always-single-line だから、 @media の条件式なども @media と同じ行に書かないといけない。…ってことで合ってるかな?違うかな?


"at-rule-semicolon-newline-after": "always"

Require a newline after the semicolon of at-rules.

at-rule-semicolon-newline-after

@import url("x.css");
@import url("y.css");

@ルールの @import など、セミコロンで終わったあとに改行するかどうかを指定できる。ここでは always だから、改行する。ほかにオプションはなし。


まだルールのうち a からはじまるやつしか見てないけど、きょうは疲れたのでここまで…。結構たくさんあるなあ。