Codepenで最近、CSSでカスケード層を使用しています。かなり明確な非複雑なユースケースは、1つのクラスを物に適用する傾向があることです。 「ライブラリ」コンポーネントが含まれます。したがって、プロトタイプのボタンを想像してください .button スタイリングを適用するセレクター。しかし、このライブラリコンポーネントも 受け入れます クラスだから 使用法 必要に応じて、コンポーネントが独自のスタイルを適用できます。
このような：
Reactコンポーネントを構築しているため、次のように表現しています。
そのため、特異性がまったく同じ2つのセレクターがあります。どちらが勝ちますか？注文の供給に帰着します。そして、正直に言うと、コンポーネントをCodepenで使用できるすべてのシナリオで、それがどのように再生されるかは本当にわかりません。スタイルは、時にはバンドルされるかもしれません 違う プロセスをビルドし、CSSファイルを組み合わせた、または動的にロードすることもあります。それは、私たちが通過するクラスセレクターの特異性を人為的に増やしたとき、確実に勝つために時折状況につながりました。 .myClass.myClass、 例えば。それは愚かです。
代わりに、ライブラリコンポーネントに、カスケード層を介して意図的に強力なスタイルを持たせることができます。したがって、私たちの「ルート」スタイルは次のようになります。
@layer library {
.root {
}
}単独で、それはうまくいきます。それはを意味します .myClass ものは常に勝ちます そして階層化されたスタイルは、レイヤードスタイルよりも常に強力です。しかし、私たちを正直に保つために、私たちは今後の予想される方法で物事をスロットできるように注文をセットアップしました：
@layer library, root, page, component;それは私たちのグローバルなCSSにあり、私たちが階層化を使用したいが、特定のレベルの強度で、それらのレベルを突くようなものです。
レイヤーは、サブレイヤー化を行うことができる十分なAPIです。 @layerライブラリ{}すべてのライブラリコンポーネントをラッピングするのではなく、実際にボタンに対してこのようなことを行います。
@layer library.Button {
}つまり、ライブラリレベルでまだスロットになっていることを意味しますが、ある時点で必要な場合は、コンポーネントの順序を宣言することができます。私たちはまだそれを必要としていませんが、それは正しい動きのように感じます。
私は人々がどのように考えることができるかを絶対に見ることができます カスケード層は役に立たない。 （マヌエル・マトゾヴィッチは実際にはこれを考えていませんが、彼は人々がどのようにできるかについてのコードでいくつかのポイントを挙げています。）彼らは、ここで自分のユースケースに出くわすまで、あなたがプロジェクトに「振りかける」ことができるものと同じくらいひどく役に立たなかった。ほとんどの場合、私はそれを「ブートストラップをレイヤーに入れ、自分のスタイルを解き放ちます」と考えました。しかし今、私は「具体的には一般的に平らに保ち、競合しているときは、特異性の向上の代わりにレイヤーを使用します」と考え始めています。
できるので、いくつかのボーナスCSSリンクを実行しましょう。
Be the first to comment
