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

キーポイント

• セレクターの特異性は、慎重な管理と理解を必要とする中規模および大規模プロジェクトの繰り返しの問題です。 Interactive CalculatorやSASS 'Mixinなどのツールは、特異性の理解と管理に役立ちます。
• BEM（ブロック、要素、修飾子）メソッドは、一貫した特異性を維持するための強力なツールです。各スタイルの要素にクラス名を使用することにより、各セレクターの特異性は同じままであり、過度に特定のセレクターの問題を排除します。ただし、BEMはすべてのタイプのプロジェクト、特に非開発者が部分的なHTMLを書く必要があるプロジェクトに適していない場合があります。
Less、Sass、StylusなどのPReprocessorsは、特定の問題の解決策を提供します。 1つの方法は、クラス、属性、ID、またはタイプセレクターを備えた既存のセレクターを追加して、その特異性を向上させることです。この方法には制限があります。これは、最も重いセレクターを使用すると、新しいより重いセレクターが作成されない限り上書きできないためです。
別のアプローチは、ID、クラス、および属性セレクターで動作するセルフチェーンセレクターです。この方法は、セレクターをオーバーライドするためのほぼ無限にスケーラブルな方法を提供しますが、タイプセレクターでは動作しません。親リファレンスセレクターを使用することにより、同じセレクターを複数回リンクでき、そのたびにその特異性を高めることができます。

セレクターの特異性は、ほとんどの中程度および大規模なプロジェクトにとって本当の問題であり、他の頻繁に繰り返されるコーディングの問題と同様に、慎重に処理する必要があります。 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プリプロセッサのセレクターの特異性は何ですか？

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

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

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

CSS前処理装置のセレクターの特異性を計算する方法は？

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

sassなどの前locessorsのCSSスタイルでは、「＆」とはどういう意味ですか？

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

SASSでデュアルセレクターを使用して特定の重みを増やす方法は？

SASSでは、SASSでは、セレクターをコピーすることでその特異性を向上させることができます。これは、リンクまたはダブルセレクターと呼ばれます。たとえば、

の特異性は

よりも高くなります。ただし、この方法は、CSSが維持および上書きするのがより困難になるため、注意して使用する必要があります。

.class.class CSS前処理者の特異性が高い潜在的な問題は何ですか？ .class

特異性が高いと、CSSが維持およびカバーするのがより困難になります。いわゆる特異性の競合につながる可能性があり、以前のスタイルをカバーするためにセレクターの特異性を常に改善する必要があります。これにより、CSSが膨張して複雑になります。

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

CSS前処理者の特異性を管理するためのいくつかの戦略があります。 1つは、可能な限り低特異性セレクターを使用することです。もう1つは、特異性が向上するため、不必要なネストを避けることです。また、BEM（ブロック、要素、修飾子）メソッドを使用して、特異性を低く一貫性に保つこともできます。

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

はい、!importantルールを使用して、CSSプリプロセッサの特異性をオーバーライドできます。ただし、これは最後の手段である必要があります。これは、CSSを維持するのが難しくなり、特定の対立につながる可能性があるためです。

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

セレクターの順序は、CSSプリプロセッサの特異性に影響します。 2つのセレクターの特異性が同じ場合、CSSに表示される最後のセレクターが適用されます。これは、ソースオーダーの特異性と呼ばれます。

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

はい、インラインスタイルはCSSで最も特異性が最も高く、他のスタイルをオーバーライドできます。ただし、CSSを維持するのがより困難になり、一貫性のないスタイルにつながる可能性があるため、注意して使用してください。

以上がCSSプリプロセッサを使用したセレクターの特異性の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。