stylelint-config-standard 読書会 #4

前回のつづきです!


"declaration-bang-space-after": "never"

Require a single space or disallow whitespace after the bang of declarations.

declaration-bang-space-after

- a { color: pink ! important; }
+ a { color: pink !important; }

!important の ! の文字のあとに半角スペースを空けるかどうか。ここでは never が指定されているので、空けない。空けても解釈してくれるんだね…!


"declaration-bang-space-before": "always"

Require a single space or disallow whitespace before the bang of declarations.

declaration-bang-space-before

- a { color: pink!important; }
+ a { color: pink !important; }

!important の ! の文字の前に半角スペースを空けるかどうか。ここでは always が指定されているので、空ける。


"declaration-block-no-duplicate-properties": true

Disallow duplicate properties within declaration blocks.

declaration-block-no-duplicate-properties

- a { color: pink; color: orange; }
+ a { color: orange; }

ひとつのルールセットのなかで同じプロパティが重複して指定されているときに指摘するかどうか。ここでは true が指定されているので、怒られる。

また、このルールには ignore のオプションも指定されている。

ignore: ["consecutive-duplicates-with-different-values"]

p {
  font-size: 16px;
  font-size: 1rem;
  font-weight: 400;
}

新しい単位や記法(この例では rem)に対応していないブラウザでも表示が崩れないように、フォールバックとしてどのブラウザでも解釈できる値を書いたあとに次の行で上書きする手法を用いることがある。ここでは同じプロパティが続けて指定されていて、かつ値の単位が異なるときは指摘しないようになっている(この説明であってるかな)。


"declaration-block-no-redundant-longhand-properties": true

Disallow longhand properties that can be combined into one shorthand property.

declaration-block-no-redundant-longhand-properties

- a {
-   margin-top: 1px;
-   margin-right: 2px;
-   margin-bottom: 3px;
-   margin-left: 4px;
- }
+ a {
+   margin: 1px 2px 3px 4px;
+ }

以下のプロパティにショートハンドで指定できる値を指定しているときに指摘するかどうか。ここでは true が指定されているので、警告される。

対象のプロパティは以下のもの。 ignoreShorthands オプションで対象から外すプロパティも指定できるし、なんと正規表現も利用できる(/border/ と指定したら border-* 系ぜんぶを対象から外す)。

  • padding
  • margin
  • background
  • font
  • border
  • border-top
  • border-bottom
  • border-left
  • border-right
  • border-width
  • border-style
  • border-color
  • border-radius
  • transition

"declaration-block-no-shorthand-property-overrides": true

Disallow shorthand properties that override related longhand properties.

declaration-block-no-shorthand-property-overrides

- a {
-   padding-left: 10px;
-   padding: 20px;
- }
+ a {
+   padding: 20px;
+ }

ショートハンドで書かれていないプロパティに指定された値を、あとから書かれたショートハンドのプロパティに指定された値で上書きすることを許すかどうか。ここでは true が指定されているので、指摘される。


"declaration-block-semicolon-newline-after": "always-multi-line"

Require a newline or disallow whitespace after the semicolons of declaration blocks.

declaration-block-semicolon-newline-after

- a {
-   color: pink; top: 0;
- }
+ a {
+   color: pink;
+   top: 0;
+ }

値を指定したあとのセミコロン ; で改行するかどうか。ここでは always-multi-line が指定されているので、複数行のルールセットのときは改行することになっている。


"declaration-block-semicolon-space-after": "always-single-line"

Require a single space or disallow whitespace after the semicolons of declaration blocks.

declaration-block-semicolon-space-after

- a { color: pink;top: 0; }
+ a { color: pink; top: 0; }

値を指定したあとのセミコロン ; のあとに半角スペースを空けるかどうか。ここでは always-single-line が指定されているので、単数行のルールセットのときは空けることになっている。


"declaration-block-semicolon-space-before": "never"

Require a single space or disallow whitespace before the semicolons of declaration blocks.

declaration-block-semicolon-space-before

- a { color: pink ; }
+ a { color: pink; }

値を指定したあとのセミコロン ; の前に半角スペースを空けるかどうか。ここでは never が指定されているので、空けない。


"declaration-block-single-line-max-declarations": 1

Limit the number of declaration within a single line declaration block.

declaration-block-single-line-max-declarations

- a { color: pink; top: 3px; }
+ a {
+   color: pink;
+   top: 3px;
+ }

1 行にいくつ宣言を書けるかを数字で指定できる。ここでは 1 が指定されているので、 1 行に宣言は 1 つまで。


"declaration-block-trailing-semicolon": "always"

Require or disallow a trailing semicolon within declaration blocks.

declaration-block-trailing-semicolon

- a { color: pink }
+ a { color: pink; }

ルールセットの最後の宣言は値のあとのセミコロンを省略できるが、省略していいかどうか。ここでは always が指定されているので、省略せずに値のあとには必ずセミコロンを書く。


"declaration-colon-newline-after": "always-multi-line"

Require a newline or disallow whitespace after the colon of declarations.

declaration-colon-newline-after

- a {
-   box-shadow: 0 0 0 1px #5b9dd9,
-     0 0 2px 1px rgba(30, 140, 190, 0.8);
- }
+ a {
+   box-shadow:
+     0 0 0 1px #5b9dd9,
+     0 0 2px 1px rgba(30, 140, 190, 0.8);
+ }

宣言のプロパティのあとのコロン : で改行するかどうか。ここでは always-multi-line が指定されているので、値が複数行のときは改行することになっている。


"declaration-colon-space-after": "always-single-line"

rules…

declaration-colon-space-after

- a {
-   box-shadow:0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
- }
+ a {
+   box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
+ }

宣言のプロパティのあとのコロン : のあとに半角スペース空けるかどうか。ここでは always-single-line が指定されているので、値が単数行のときは空ける。複数行のときは、改行するので空けなくていい。


"declaration-colon-space-before": "never"

Require a single space or disallow whitespace before the colon of declarations.

declaration-colon-space-before

- a { color : pink; }
+ a { color: pink; }

宣言のプロパティのあとのコロン : の前に半角スペース空けるかどうか。ここでは never が指定されているので、空けない。


"declaration-empty-line-before": "always"

Require or disallow an empty line before declarations.

declaration-empty-line-before

- a {
-   bottom: 15px;
-   top: 5px;
- }
+ a {
+ 
+   bottom: 15px;
+ 
+   top: 5px;
+ }

宣言の前に空行を空けるかどうか。ここでは always が指定されているので、空ける。

また、このルールには except と ignore のオプションも指定されている。

except: ["after-declaration", "first-nested"]

ignore: ["after-comment", "inside-single-line-block"]

つかれたのであとでしらべよう…。


d からはじまるルールが終わったところで、きょうはここまで。

stylelint-config-standard 読書会 #3

前回のつづきです!


"color-hex-case": "lower"

Specify lowercase or uppercase for hex colors.

color-hex-case

- a { color: #FFF; }
+ a { color: #fff; }

色を指定する 16 進数の値を小文字で書くか大文字で書くか。ここでは lower が指定されているので、小文字で書く。


"color-hex-length": "short"

Specify short or long notation for hex colors.

color-hex-length

- a { color: #ffffff; }
+ a { color: #fff; }

色を指定する 16 進数の値は、例えば fff に省略できるが、省略できるときは省略するかどうか。ここでは short が指定されているので、省略する。


"color-no-invalid-hex": true

Disallow invalid hex colors.

color-no-invalid-hex

- a { color: #00; }
+ a { color: #000; }

色を指定する 16 進数の値がおかしいときに指摘するかどうか。ここでは true が指定されているので、怒られる。あたりまえのようにおもうけど、書き間違えたときに教えてくれるよってことですよね。


"comment-empty-line-before": "always"

Require or disallow an empty line before comments.

comment-empty-line-before

- a {}
- /* comment */
+ a {}
+
+ /* comment */

CSS のコメントを書くとき、直前の行を空けるかどうか。ここでは always が指定されているので、空ける。

また、このルールには except と ignore のオプションも指定されている。

except: ["first-nested"]

a {
  /* comment */
  color: pink;
}

ルールセットがはじまったばかりのコメントは、空行を空けなくてもいい。

ignore: ["stylelint-commands"]

a {
  background: pink;
  /* stylelint-disable color-no-hex */
  color: pink;
}

stylelint で指定したルールに反している記述だけどここだけ除外したいってとき、 CSS のコメントで除外する旨を書いておくと stylelint が無視してくれる。そのコメントの前も改行するのか?というと、これは改行しなくてもいいように除外するようになっている(ややこしい)。

ここでは指定されていないけど、コメントの次の行にコメントを書いたときに改行するのかどうか… という指定もできる。


"comment-no-empty": true

Disallow empty comments.

comment-no-empty

- /* */
+ /* comment */

中身がからっぽのシンタックスだけのコメントを許すかどうか。ここでは true が指定されているので、許さない。


"comment-whitespace-inside": "always"

Require or disallow whitespace on the inside of comment markers.

comment-whitespace-inside

- /*comment*/
+ /* comment */

コメントのシンタックスの開始の文字の後・終了の文字の前に半角スペースを空けるかどうか。ここでは always が指定されているので、空ける。なんか昔の Internet Explorer とか一部のブラウザだとスペース空いてないと解釈してくれないんじゃなかったっけ…(要出典)。


"custom-property-empty-line-before": "always"

Require or disallow an empty line before custom properties.

custom-property-empty-line-before

- a {
-   top: 10px;
-   --foo: pink;
-   --bar: red;
- }
+ a {
+   top: 10px;
+ 
+   --foo: pink;
+ 
+   --bar: red;
+ }

CSS のカスタムプロパティを書くときに、直前の行を空けるかどうか。ここでは always が指定されているので、空ける。へえ〜 そうなんだなあ。

また、このルールには except と ignore のオプションも指定されている。

except: ["after-custom-property", "first-nested"]

a {
  --foo: pink;
  --bar: red;
}

after-custom-property は、カスタムプロパティが連続して書かれるときに、次に書く行は空行を空けなくてよしということを指定している。

first-nested は、ルールセットがはじまったばかりに書かれたカスタムプロパティは、空行を空けなくてもいい。

…というわけで、カスタムプロパティしか書かないルールセットは例のように空行をあける必要がない。ふつうのプロパティと混在して書くときは空行を空けろってことなんですね。

ignore: ["after-comment", "inside-single-line-block"]

a {
  /* comment */
  --foo: pink;
}

after-comment は、コメントの次の行に書かれたカスタムプロパティは対象としないって指定。

a { --foo: pink; --bar: red; }

inside-single-line-block は、複数のカスタムプロパティを 1 行で書いちゃったときは対象としないって指定。


c からはじまるルールが終わったところで、きょうはここまで。

stylelint-config-standard 読書会 #2

前回のつづきです!


"block-closing-brace-empty-line-before": "never"

Require or disallow an empty line before the closing brace of blocks.

block-closing-brace-empty-line-before

- a {
-   color: pink;
-
- }
+ a {
+   color: pink;
+ }

ルールセットを複数行で書くとき、終わりの } の直前の行を空けるかどうか。ここでは never が指定されているので、空けない。ちなみに、 always-multi-line を指定すると空けないといけない(そんなことあるの…)。なお、ルールセットを 1 行で書くときは関係ない。


"block-closing-brace-newline-after": "always"

Require a newline or disallow whitespace after the closing brace of blocks.

block-closing-brace-newline-after

- a { color: pink; } b { color: red; }
+ a { color: pink; }
+ b { color: red; }

ルールセットの終わりの } のあと改行するかどうか。ここでは always が指定されているので、改行する。これ、このほかに用意されているオプションが細かすぎてまったく伝わらなかった…。いつ使うの…。


"block-closing-brace-newline-before": "always-multi-line"

Require a newline or disallow whitespace before the closing brace of blocks.

block-closing-brace-newline-before

- a {
- color: pink;}
+ a {
+ color: pink;
+ }

ルールセットの終わりの } を書くとき、直前で改行して } だけの行にするかどうか。ここでは always-multi-line が指定されているので、複数行にわたってルールセットを書くときは } の直前で改行することになっている。単数行のときは 1 行にまとめて OK。単数行だろうと絶対改行するとか、逆に絶対改行しないとかも選ぶことができる。そういう CSS 見たことないけど、あるんだなあ。


"block-closing-brace-space-before": "always-single-line"

Require a single space or disallow whitespace before the closing brace of blocks.

block-closing-brace-space-before

- a { color: pink;}
+ a { color: pink; }

ルールセットの終わりの } の前に半角スペースを入れるかどうか。ここでは always-single-line が指定されているので、単数行のルールセットならスペースを入れることになっている。複数行なら問わない。これもいろんなオプションが用意されていて、細かすぎておもしろくなってきた。


"block-no-empty": true

Disallow empty blocks.

block-no-empty

- a { }
+ a { color: pink; }

空のルールセットを許すかどうか。ここでは true が指定されているので、空のルールセットがあると怒られる。ほかにオプションはなし。


"block-opening-brace-newline-after": "always-multi-line"

Require a newline after the opening brace of blocks.

block-opening-brace-newline-after

- a{color: pink;
- }
+ a{
+   color: pink;
+ }

ルールセットをはじめるときの { のあと改行するかどうか。ここでは always-multi-line が指定されているので、複数行のルールセットなら改行して、単数行なら問わないことになっている。


"block-opening-brace-space-after": "always-single-line"

Require a single space or disallow whitespace after the opening brace of blocks.

block-opening-brace-space-after

- a {color: pink; }
+ a { color: pink; }

ルールセットをはじめるときの { の後に半角スペースを空けるかどうか。ここでは always-single-line が指定されているので、単数行のルールセットならスペースを空けて、複数行なら問わないことになっている。


"block-opening-brace-space-before": "always"

Require a single space or disallow whitespace before the opening brace of blocks.

block-opening-brace-space-before

- a{ color: pink; }
+ a { color: pink; }

ルールセットをはじめるときの { の前に半角スペースを空けるかどうか。ここでは always が指定されているので、絶対スペースを空けることになっている。改行しても怒られる。ほかにも指定できるオプションがたくさんあって、なぜか異常に細かい。


b からはじまるルールが終わったところで、きょうはここまで。

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 からはじまるやつしか見てないけど、きょうは疲れたのでここまで…。結構たくさんあるなあ。