2つの新しいカスケード基準、すなわちレイヤーとスコープの近接性を使いこなし、詳細度の争いなしにスタイルを設計しましょう。
このレッスンを Kodokon で開くカスケードは、順序づけられた基準を使って競合する宣言を解決します。オリジンと重要度、次にコンテキスト、次に style 属性のスタイル、次にレイヤー(@layer)、次に詳細度、そして最後に出現順です。決定的な点は、レイヤーが詳細度より前に評価されることです。したがって、優先度の高いレイヤーにある .button のルールは、優先度の低いレイヤーにある #nav div.menu a.button に打ち勝ちます。その (1,2,2) という詳細度は、レイヤー順序の前ではまったく意味を持ちません。これこそが @layer をデザインシステムの設計にとって非常に強力なものにしています。優先度はセレクタごとに争い取るのではなく、一度だけ、構造的に宣言されるのです。
@layer reset, base, components, utilities;
@layer components {
.button { background: rebeccapurple; }
}
@layer base {
button { background: gray; }
}絶対に知っておくべき仕様上の細部が2つあります。1つ目。どのレイヤーにも属さないスタイルは、(通常の宣言においては)レイヤー化されたスタイルに打ち勝ちます。それらは最後に置かれる暗黙のレイヤーを形成するからです。したがって、あなたのローカルな上書きは、常にレイヤー化されたライブラリに勝ちます。2つ目。!important を使うと、順序が完全に逆転します。最初に宣言されたレイヤーが勝ち、レイヤー内の !important は、どのレイヤーにも属さない !important に打ち勝ちます。あなたの reset レイヤーの中の !important 宣言は、ほとんど打ち負かせないものになるのです。
@layer base, theme;
@layer base {
a { color: black !important; }
}
@layer theme {
a { color: purple !important; }
}@scope は、一連のルールをスコープのルートとオプションの下側の境界との間に区切ります。@scope (.card) to (.card__content) は、.card の子孫でありながら .card__content の外側にある要素を対象とします。これが有名なドーナツスコープで、注入されるコンテンツに漏れ出すことなくコンポーネントの枠組みをスタイリングするのに理想的です。内部では、:scope はルート自身を指します。そして @scope はまったく新しいカスケード基準、すなわち近接性を導入します。詳細度が等しい場合、スコープのルートが要素に最も近いルールが勝ちます。これはBEMも結合子も決して表現できなかったものです。
@scope (.card) to (.card__content) {
:scope {
padding: 1rem;
border: 1px solid oklch(0.85 0.02 260);
}
img { border-radius: 8px; }
}