CSSプリプロセッサを使用したセレクターの特異性-CSSチュートリアル-php.cn

セレクターの特異性は、競合するルールが存在するときにどのスタイルが要素に適用されるかを決定するCSSの概念です。これは、異なるタイプセレクター（ID、クラス、タイプセレクターなど）に割り当てられた重量システムです。 SASS以下などのCSS前処理店では、この概念は同じままです。ただし、これらの前処理は、セレクターの特異性に影響するネストなどの追加の機能を提供します。

ネスティングは、CSSプリプロセッサの機能であり、より整理されたコードを読みやすく書くことができます。ただし、セレクターの特異性も向上します。各ネストレベルは特異性を追加し、ネストされたセレクターを親セレクターよりも具体的にします。これは、スタイルを上書きするのに役立ちますが、適切に管理されていないと予想外の結果につながる可能性があります。

セレクターの特異性は、使用されるセレクターのタイプに基づいて計算されます。一般に、IDセレクターは最も特異的で、その後にクラスセレクターが続き、次にセレクターを入力します。各タイプのセレクターには異なる重みが割り当てられ、合計特異性はこれらの重みの合計です。 SASSなどの一部のCSS前処理は、セレクターの特異性を計算するための機能を提供します。

「＆」シンボルは、ネストされたルールの親セレクターを参照するために、SASSなどのCSSプレセッサーで使用されます。これは、より特定のセレクターを作成したり、ホバー状態やアクティブ状態などの要素の異なる状態にスタイルを適用するのに役立ちます。

の特異性は

CSSプリプロセッサの特異性を管理する方法は？

CSSプリプロセッサの特異性をオーバーライドするために重要！

セレクターの順序は、CSS前処理者の特異性にどのように影響しますか？

インラインスタイルを使用して、CSSプリプロセッサの特異性をオーバーライドできますか？

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSプリプロセッサを使用したセレクターの特異性

William Shakespeare

Feb 25, 2025 am 11:30 AM

Selector Specificity with CSS Preprocessors

キーポイント

セレクターの特異性は、慎重な管理と理解を必要とする中規模および大規模プロジェクトの繰り返しの問題です。 Interactive CalculatorやSASS 'Mixinなどのツールは、特異性の理解と管理に役立ちます。
BEM（ブロック、要素、修飾子）メソッドは、一貫した特異性を維持するための強力なツールです。各スタイルの要素にクラス名を使用することにより、各セレクターの特異性は同じままであり、過度に特定のセレクターの問題を排除します。ただし、BEMはすべてのタイプのプロジェクト、特に非開発者が部分的なHTMLを書く必要があるプロジェクトに適していない場合があります。

セレクターの特異性は、ほとんどの中程度および大規模なプロジェクトにとって本当の問題であり、他の頻繁に繰り返されるコーディングの問題と同様に、慎重に処理する必要があります。 CSS-Tricksでさえ、CSSの特異性を低く抑える方法に関する最近の記事があります。

を使用しようとする前に、思い出させてください：＆gt; ——Tony Nelson（@Tonynelson19）2010年11月18日!important !importantCSSの特異性は複雑ではありませんが、コミュニティは、魚やスターウォーズに類似点を使用したり、ポーカー用語を使用したりすることでガイドを書くことができるように、できるだけ理解しやすくするために多くの仕事をしてきました。オンラインで入手可能なインタラクティブな計算機、さらにはSASSの特定のミックスインもあり、セレクターの正確な特異性値を確認して出力できます。 CSS固有の戦略では、この記事の特定のソリューション（少し不器用だと感じるかもしれない）がより簡単に簡単になります。アーキテクチャが簡単な修正を許可しない状況に適しています。プロジェクトに最適なアプローチを決定するときは、判断を適用し、最終的には、清潔で維持できるCSSの間の完璧なバランスをとるようにしてください。 !important

メソッド0 - BEM BEMは単なる命名規則ではなく、Yandexによって発明されたフロントエンドのツールキットであり、オブジェクト指向のプログラミングに近づくというアイデアです。実際には、これはあなたがスタイルしたいすべてのものにクラス名を使用することを意味します。「カスケードスタイルシートでケーシングではない」人にとってはばかげているように聞こえるかもしれませんが、メンテナンスが容易で、ポータブルで、自給自足で、変更が容易で拡張可能なモジュールを作成するときにタイプセレクターの使用を避け、ネストを回避するという考えは非常に役立つ。ただし、BEMメソッドの主な利点の1つは、各セレクターの特異性を変更せずに保持することです。したがって、過度に特定のセレクターに起因する問題はほとんどありません。そのため、この方法はNo. 0方法です。、実際には、プロジェクトのセレクターの特異性に関する将来の問題を排除します。

ルールの指定

書いたものすべてに1つのクラスのみを使用するため、各セレクターの特異性は0,1,0

になります。

bemは答えではありません

BEMのフロントエンドアーキテクチャの使用に関するサクセスストーリーは無数にありますが、その人気にもかかわらず、BEMは特定の種類のプロジェクトには適していません。フロントエンド開発者がHTMLを作成する唯一のプロジェクトになるのに最適なようです。ただし、コンテンツエディターの少なくとも一部についてCMSのコンテンツを作成すると、BEMは厳しく制限されます。 BEMの純粋な形では、ネスティングやタイプセレクター（たとえば、軽量にする）は許可されていませんが、代わりにアンカータグのクラスを発明する必要があります。これにより問題が発生します。コンテンツエディターは、グラフィカルインターフェイスを介してデフォルトのリンクを挿入し、リンクをほとんど目に見えない可能性があります。これは、特定のセクションのすべての段落、リスト、または画像にも適用される場合があります。クラスなしで純粋なHTMLコンテンツを作成できる必要がある場合があります。その場合、ソリューションでは、親を子孫セレクターでスタイリングすることです。このカスケードを使用すると、コンテキストの柔軟性が可能になります。何かが異なるコンテキストにある場合、カスタムスタイルがあります。そのため、純粋なBEMを使用できない状況のための実用的なソリューションが必要です。これは非常に一般的です。 CSS Preprocessorsはここで私たちを支援し、3人の人気のある前処理者すべて（少ない、SASS、スタイラス）は、より具体的なセレクターでセレクターをオーバーライドする必要がある場合に作業を簡素化することができます。 .Section--dark > a

メソッド1 - セレクターを使用してプレフィックスを追加します

特異性の問題に遭遇し、セレクターをより重くしたい場合、既存のセレクターの前にクラス、属性、ID、またはタイプセレクターを追加できます。このようにして、特異性をわずかに増加させることができます。この機能は、主に条件付きHTMLタグを使用してIEを見つけるために使用されますが、開発すべきより多くの機能があります。 CSSプリプロセッサの親リファレンスセレクター（＆）を使用すると、セレクターのプレフィックスを簡単に追加して重くすることができます。

作成されたcss：

<code>.class {
  body & {
    foo: bar;
  }
}</code>

ログイン後にコピー

<code>.class {
  body & {
    foo: bar;
  }
}</code>

ログイン後にコピー

HTMLまたはボディタグをプレフィックスに使用することもできますが、ページに存在するより具体的なコンテンツを使用することもできます。 SASSを使用すると、将来的に変更が発生した場合、変数にプレフィックスセレクターを配置できます。 .page #wrapperこれは次のとおりです html[lang] LessやStylusなどの他の人気のあるプリプロセッサもこの機能を提供しています。

ルールの指定

<code>body .class {
  foo: bar;
}</code>

ログイン後にコピー

プレフィックスの追加タイプセレクターを使用して元のクラスセレクター0,1,0は0,1,1、IDのプレフィックス - 1,1,0になります。ここでのマイナス面は、コード内の最も重いセレクター（つまり

<code>$prepend1: "html &";
$prepend2: "#wrapper &";

.selector {
  #{$prepend1} {
    background: #cacaca;
  }
  #{$prepend2} {
    background: #fefefe;
  }
}</code>

ログイン後にコピー

）にセレクタープレフィックスを追加すると、新しいより重いセレクターを発明しない限り、これをオーバーライドできなくなり、これが常に可能ではないことです。

方法2 - 自己鎖セレクター

#wrapperセレクタープレフィックスの追加は便利ですが、無限にスケーラブルなソリューションではありません。親を見つける方法は限られている可能性があります。さらに、複数のセレクターをコードで最も重いオプションでプレフィックスにすると、後で特異性の問題を解決するためのオプションを制限します（特にIDを使用する場合）。フロントエンドコミュニティは最近、非常に有用なCSS機能、特異性を向上させるセルフチェーンセレクターを思い出させました。セルフチェーンセレクターは、ID、クラス、属性セレクターに適していますが、タイプセレクターには適していません。ただし、主にクラスを使用してコンテンツのスタイルを使用する場合、セルフチェーンセレクターは、セレクターをオーバーライドする無限にスケーラブルな方法を提供します。親参照セレクターを使用すると、同じセレクターを複数回簡単にリンクできます（これは、ID、クラス、属性セレクターに適用されますが、選択者と入力するのではありません）。ただし、それぞれを挿入する必要があり、最初の要件の後、最小要件はSASS 3.4：

です。

同様に、これをより少ないスタイラスとスタイラスを使用して行うことができます。これがあなたの好みに醜すぎる場合、単一のセレクターの特異性を繰り返し改善するミックスインをいつでも作成できます。このMixinはいくつかの高度な機能を使用しており、SASS 3.4：

も必要です。

作成されたcss：

<code>html .selector {
  background: #cacaca;
}
#wrapper .selector {
  background: #fefefe;
}</code>

ログイン後にコピー

<code>.selector {
  {&} {
    background: #cacaca;
  }
  {&}{&} {
    background: #fefefe;
  }
}</code>

ログイン後にコピー

スタイラスで同じミックスインを作成できますが、残念ながら、そのようなミックスインをより少ない量で作成する簡単な方法はありません。

ルールの指定

<code>.selector.selector {
  background: #cacaca;
}
.selector.selector.selector {
  background: #fefefe;
}</code>

ログイン後にコピー

自己鎖により、セレクターの特異性が0,1,0から0,2,0などに増加し、ほぼ無限にスケーラブルになります。

<code>@mixin specificity($num: 1) {
  $selector: &;
  @if $num > 1 {
    @for $i from 1 to $num {
      $selector: $selector + &;
    }
    @at-root #{$selector} {
      @content;
    }
  } @else {
    @content;
  }
}

.selector {
  @include specificity(2) {
    background: #cacaca;
  }
  @include specificity(3) {
    background: #fefefe;
  }
}</code>

ログイン後にコピー

最終的な考え

これまで以上に、よりスマートなCSSの特異性の問題に対処する次の自然なステップは、競合するステートメントを特定する方法を作成し、各エンティティの特異性にDavid KhourshidのSASS Mixinのようなものを使用し、上記の方法のいずれかを自動的に使用して自動的に改善することです。特異性。たぶん、私は自己認識のスタイルシートの夢について楽観的すぎますが、CSSのプレ前セッサーが発達するにつれて、コードの複雑なロジックが増加すると思います。次回特異性の問題に対処する必要があるときに、上記の方法のどれを使用しますか？具体性の問題を解決するために他にどのような戦略を使用していますか？

CSS前処理器とセレクターの特異性に関するFAQ

CSSプリプロセッサのセレクターの特異性は何ですか？