カスケードと戦って、コントロールしないでください！

CSSカスケードをマスターしてください：カオスに別れを告げ、コントロールを受け入れてください！この記事では、新しいCSS機能を使用してカスケードを制御して、より簡潔で効率的なCSSコードを作成する方法について説明します。過去には、さまざまなソースのスタイルがカスケードを管理するのが難しく、最終的に冗長コードを作成しました。 ITCSSやBEMなどの方法でさえ、 @importステートメントの位置を正確に制御したり、 !importantことに頼らなければならないなど、カスケードによってもたらされる課題に直面しています。幸いなことに、いくつかの新しいツールが出てきて、カスケードを効果的に制御することができます。

ドライブ:where擬似セレクター

:where 。これは、セレクターの特異性が実際にゼロであることを意味します。これは、汎用コンポーネントに非常に役立ちます。

たとえば、使用:where ：

 ：where（table）{
  バックグラウンドカラー：タン;
}

他のテーブルスタイルがこの前に定義されていても：

テーブル {
  バックグラウンドカラー：hotpink;
}

：where（table）{
  バックグラウンドカラー：タン;
}

テーブルの背景色はまだtanているためです:whereこれにより:where 。

:where兄弟セレクター:is逆の効果があります：

:is()擬似クラスの特異性は、その最も特別なパラメーターの特殊性によって決定されます。したがって、次のように書かれたセレクターは:is()なしで書かれた同等のセレクターと同じ専門性を持つとは限りません:is() 。 - セレクターレベル4仕様

前の例を続けてください：

 ：is（table）{
  -TBL-BGC：Orange;
}
テーブル {
  -TBL-BGC：tan;
}
：where（table）{
  -TBL-BGC：HotPink;
  バックグラウンドカラー：var（ -  tbl-bgc）;
}

テーブルの背景色はtanます。なぜなら:is tableと同じ特異性があり、 tableその背後にあるからです。しかし、私たちがそれを変更する場合：

 ：is（table、.c-tbl）{
  -TBL-BGC：Orange;
}

背景色はorange .c-tblなります:is

例：構成可能なテーブルコンポーネント

次のHTMLを使用してテーブルコンポーネントを構築しましょう。

次に、 .c-tblを:where 、丸い角を追加します。

 ：where（.c-tbl）{
  境界線崩壊：別々;
  境界面：0;
  テーブルレイアウト：自動;
  幅：99.9％;
}

テーブルセルは異なるスタイルを使用しています：

 ：where（.c-tbl thead th）{
  / * ... */
}
：where（.c-tbl tbody td）{
  / * ... */
}

丸い角とborder-collapse: separate 、私たちは追加のスタイルを追加する必要があります：

 ：where（.c-tbl tr td：first-of-type）{
  / * ... */
}
/ * ... */

これで、一般的なスタイルの前または後に他のスタイルを注入することにより、テーブルコンポーネントのバリエーションを作成できます（メリット:where 'Specialty Elimination）：

 .c-tbl-パープルth {
  背景色：HSL（330、50％、40％）
}
/ * ... */

CSSカスタムプロパティ

data-componentプロパティを使用して、コンポーネントを定義します。

一般的なスタイルはすべてのコンポーネントインスタンスに適用され、特定のコンポーネントインスタンスのスタイルが一般クラスに含まれ、共通コンポーネントのカスタムプロパティが使用されます。

 ：where（[data-component = "table"]）{
  / * ... */
}
.c-tbl-パープル{
  / * ... */
}

一般的なコンポーネントでは、各CSSプロパティがカスタムプロパティを指します。子要素（ border-colorなど）に作用する必要がある属性は、一般的なコンポーネントのルートで指定されています。

 ：where（[data-component = "table"]）{
  -TBL-HUE：200;
  / * ... */
}
：where（[data-component = "table"] td）{
  境界線：var（ -  TBL-BDC）;
}

その他のプロパティは、静的値を設定するか、カスタムプロパティを使用して構成することができます。カスタムプロパティを使用する場合は、バリアントクラスが欠落しているときに使用するデフォルト値を定義することを忘れないでください。

 ：where（[data-component = "table"]）{
  背景色：var（ -  tbl-bgc、透明）;
  / * ... */
}

カスタムプロパティを使用して、列のアライメントと幅を制御できます。

 ：where（[data-component = "table"] tr> *：nth-​​of-type（1））{
  テキストアライグ：var（ -  ca1、initial）;
  / * ... */
}

次に、通常のクラス.c-tblを使用して、特定のコンポーネントスタイルを作成しましょう。

 .c-tbl {
  -TBL-HUE：330;
}

新しいCSSを書くことなく、プロパティを更新するだけです！プロパティを変更して、テーブルの色を更新します。

ゼブラストライプなど、より複雑なスタイルを書くことができます。

 .c-tbl tr：nth-​​child（偶数）td {
  -TBL-TD-BGC：HSL（var（ -  tbl-hue）、var（ -  tbl-sat）、95％）;
}

別のdata-attributeを使用してパラメーターを追加します

別のdata-paramプロパティを追加して、パラメーターを追加することができます。

次に、CSSでは、プロパティセレクターを使用して、パラメーターリストの単語全体を一致させることができます。たとえば、ゼブラストライプ行：

 [data-component = "table"] [data-param〜 = "zebrarow"] tr：nth-​​child（vev）td {
  -TBL-TD-BGC：var（ -  tbl-zebra-bgc）;
}

またはZebra Stripes列：

 [data-component = "table"] [data-param〜 = "zebracol"] td：nth-​​of-type（odd）{
  -TBL-TD-BGC：var（ -  tbl-zebra-bgc）;
}

カスケード層

カスケードを制御する最後のツールは、「カスケード層」です。現在、これは#enable-cascade-layersフラグを有効にするためにSafariまたはChromeでアクセスできる実験機能です。

カスケード層を使用すると、特定の順序でスタイルシートを注入できます。単純化された構造は次のとおりです。

 @layerジェネリック、コンポーネント。

これにより、レイヤーの順序が決まります。まず、一般的なスタイル、次にコンポーネント固有のスタイルがあります。

コンポーネントスタイルが一般的なスタイルの前に書かれている場合でも、コンポーネントスタイルのレイヤーが優先されます。

 @layerコンポーネント{
  体 {
    バックグラウンドカラー：Lightseagreen;
  }
}

@layer generic { 
  体 {
    背景色：トマト。
  }
}

要約します

:where :is擬似選択的な属性を制御することができdata-attribute 。 CSSカスケードはもはや敵ではなく、私たちが制御できるツールです。

スティーブン・レオナルディの画像は、塗りつぶされていません

以上がカスケードと戦って、コントロールしないでください！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。