ホームページ > ウェブフロントエンド > CSSチュートリアル > カスケードと戦って、コントロールしないでください!

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

William Shakespeare
リリース: 2025-03-15 10:13:12
オリジナル
835 人が閲覧しました

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート