レイヤーで勝つ

目標

@layerを使ったスタイルシートを書き、どの宣言が勝つかを計算ツールで確認します。ブラウザーがなくても、この答えは1つに決まります。

なぜ重要なのか

並べ替えの順序では、レイヤーは詳細度よりも先に決まります。そのため、レイヤーを使い始めると「詳細度が高いのに、なぜ負けるのか」という疑問が生まれ、その答えを知らないと、人はまた!importantに戻ってしまいます。

ルールは2行です。レイヤーに入れていない宣言は最後のレイヤーに入り、通常の宣言はあとのレイヤーが勝ち、!importantは前のレイヤーが勝ちます。この2行が合わさると、レイヤー外の通常の宣言は最も強く、レイヤー外の!importantは最も弱くなります。

作るもの

/root/work/layers/theme.cssの1つと、予測ファイル2つです。HTMLは必要ありません。採点ツールが、次の要素を想定してカスケードを解決します。

div#app > article.card > h2.title
div#app > article.card > h2.title.u-hidden
div#app > article.card > a.btn.primary
div.toolbar > button.btn

計算ツール

cd /root/work/layers
python3 /opt/lab/checks/css-layer-lab/layercalc.py theme.css

宣言ごとにレイヤー・メディア条件・詳細度・順序を表示し、いちばん上にレイヤーの順序を出力します。扱えないセレクターに出会うと、黙って読み飛ばさず、「解釈できません」と言います。

ステップ

@layer reset, base, components, utilities;をいちばん上に
4つのレイヤーを埋めて、あとのレイヤーが勝つことを確認
レイヤー外のルールが、詳細度が低いのに勝つ → 03-predict.txt
!importantは順序を逆転させる → 04-predict.txt
:where()で詳細度0の基本値
ユーティリティが、詳細度なしでコンポーネントに勝つ
計算ツールの結果を07-resolve.txtに
レイヤー外の!importantをなくす
まとめ → 09-notes.md

参考

この計算ツールは:where()と:is()を扱いますが、かっこの中に結合子が入ったセレクターは扱いません。:where(.title)のように、1つだけ入れてください。
予測ファイルを先に書いてから、計算ツールを実行してください。順序を逆にすると、学べることがなくなります。

レイヤーの順序を固定する

/root/work/layers/theme.cssを作成し、最初のルールとして@layer reset, base, components, utilities;を書いてください。そして、各レイヤーに最低1つのルールを入れてください。

mkdir -p /root/work/layersを実行します。レイヤーの順序は、名前が最初に出てきた順で決まります。ブロックのない宣言型のルールをいちばん上に1行置けば、それ以降は、どのファイルが先に読み込まれても、順序が固定されます。

あとのレイヤーが勝つ

baseとcomponentsの2つのレイヤーに、div#app > article.card > h2.titleに適用されるcolorのルールをそれぞれ置き、componentsが勝つようにしてください。この段階では!importantを使いません。

通常の宣言は、あとのレイヤーが勝ちます。詳細度を上げる必要はありません。レイヤーの段階が詳細度よりも先に決まるからです。計算ツールで、勝者のレイヤー名を確認してください。

レイヤー外が最も強い

@layerブロックの外側に、見出しの色のルールを1行書いてください。そのセレクターの詳細度は、componentsのルールよりも低い必要があります。そして、/root/work/layers/03-predict.txtに、勝つ場所と勝つ値を書いてください。

レイヤーに入れていない宣言は、暗黙のうちに最後のレイヤーに入ります。詳細度1,2,0のルールに、0,1,0が勝つのを目にすることになります。計算が間違っているのではなく、詳細度が見られる番が来なかったのです。予測ファイルには、레이어 밖(韓国語で「レイヤーの外」を意味する語です)と、勝つ色の値が入っている必要があります。

importantは順序を逆転させる

resetレイヤーとcomponentsレイヤーに、div#app > article.card > a.btn.primaryに適用される!importantの色ルールをそれぞれ置いてください。reset側のセレクターの詳細度は、より低い必要があります。04-predict.txtに、どちらのレイヤーが勝つかと、その理由を書いてください。

通常の宣言はあとのレイヤーが勝ちますが、!importantは前のレイヤーが勝ちます。仕様は、これがimportantが出どころの順序を逆転させるのと同じ論理だと説明しています。予測ファイルに、resetとimportantが含まれている必要があります。

詳細度0の基本値

baseレイヤーに、:where()で見出しの太さの基本値を書き、同じレイヤーの中に、詳細度のある太さのルールをもう1つ置いてください。:where()のルールが、ファイルの中でより後ろにある必要があります。

:where()の詳細度は、常に0,0,0です。あとに書いたのに、前のタグセレクターに負けるのを見れば、順序ではなく詳細度で決まったことが証明されます。かっこの中には、結合子なしで1つだけ入れてください。

ユーティリティが詳細度なしで勝つ

utilitiesレイヤーに.u-hidden { display: none }を置き、componentsレイヤーには、同じ要素を選ぶより高い詳細度のdisplayルールを置いてください。!importantなしで、ユーティリティが勝つ必要があります。

採点ツールは、div#app > article.card > h2.title.u-hiddenで何が勝つかを計算します。ユーティリティクラスに!importantを付ける慣行は、レイヤーがあれば不要になります。ユーティリティレイヤーをコンポーネントのあとに宣言すれば、それで終わりです。

計算ツールで確認する

layercalc.pyを実行して、結果を/root/work/layers/07-resolve.txtに残してください。保存された行数が現在のシートの宣言の数と同じで、レイヤー順序の行がそのまま入っている必要があります。

python3 /opt/lab/checks/css-layer-lab/layercalc.py theme.css | tee 07-resolve.txtを実行します。開発者ツールで取り消し線が引かれたルールを見るとき、頭の中でしている計算が、これです。

レイヤー外のimportantをなくす

シート全体で、レイヤー外の!importantがない必要があります。そして、componentsレイヤーに.toolbar > button.btnの色ルールを追加して、ツールバーのボタンの色がcomponentsから来るようにしてください。!importantは、すべて合わせて4つを超えてはいけません。

レイヤー外の!importantは、すべてのレイヤーの!importantに負けます。最も強くしようとして書いたものが最も弱くなる場所なので、レイヤーを導入したシートで最もよく起きる事故です。消すか、resetに移してください。

なぜ詳細度の番が来ないのか

/root/work/layers/09-notes.mdに3行以上(120文字以上)書いてください。本文に레이어、특정성、importantが含まれている必要があります(韓国語で「レイヤー」と「詳細度」を意味する語を含みます)。シートも、引き続き前の段階の基準を通過する必要があります。

核心は1つです。並べ替えの順序で、レイヤーが詳細度よりも前にあります。前で決まれば後ろは見ないというのが、カスケード全体を貫くルールです。