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 サイトの他の関連記事を参照してください。