クリスコーナー：CSSに近づく – Codepen

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リンクを実行しましょう。

• アンディ・ベル： 現代のCSSでテーマに近づいている方法。カスタムプロパティは重く、「テーマ」が限られたセット（「フレア」層）を上書きして最大限の影響を与えることができるようになります。
• アンドリュー・ウォルポール： 良いCSSを書くための意見。基本的にベストプラクティスのリスト。私は最後のものが本当に好きです：「しないでください。貼り付け。CSS。」
• クリスチャン・ドドフ： CSSはあなたを刑務所に入れることができます。ネタバレ、それはブラウザがネストされたリストでカウンターをレンダリングする方法についてです。法的文書では、潜在的なブラウザの違いをレンダリングするリスクを冒すことはできず、数字をハードコードする必要があります。
• ジョシュ・コモー： CSSの秘密メカニズム。たった1つの素晴らしい引用： 「レイアウトアルゴリズムは関数のようなものであり、私たちが書くCSSはそれらの関数に渡す議論です」。
• （匿名？） `if/else`ロジックの代わりに、css ‘の唯一の子供`を使用します。時々、if/else logic for Viewは、CSSレベルよりもHTMLレベルでより理にかなっていると感じます。しかし、彼らはここでTailwindを使用しているため、そのロジックをHTMLレベルに置いています。
• アダム・アーガイル： 頭のない、骨なし、肌のない、活気のないUI。 Adamが言うように、これらは誰もがUIフレームワークを説明するために積極的に使用している用語ではありませんが、おそらくそうすべきです。なぜなら、これらは非常に異なる理由で選択するかなり大きな区別であるからです。