前回のつづきです！
"declaration-bang-space-after": "never"
Require a single space or disallow whitespace after the bang of declarations.
- 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.
- a { color: pink!important; } + a { color: pink !important; }
!important の ! の文字の前に半角スペースを空けるかどうか。ここでは always が指定されているので、空ける。
"declaration-block-no-duplicate-properties": true
Disallow duplicate properties within declaration blocks.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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…
- 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.
- a { color : pink; } + a { color: pink; }
宣言のプロパティのあとのコロン : の前に半角スペース空けるかどうか。ここでは never が指定されているので、空けない。
"declaration-empty-line-before": "always"
Require or disallow an empty line before declarations.
- 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 からはじまるルールが終わったところで、きょうはここまで。