CascadeをBEMと最新のCSSセレクターで飼育します-CSSチュートリアル-php.cn

Taming the Cascade With BEM and Modern CSS Selectors

bem。フロントエンド開発のほとんどすべてのテクノロジーと同様に、BEM形式でCSSを作成すると偏光を引き起こす可能性があります。しかし、私のTwitterのソーシャルサークルでは、少なくとも人気のあるCSSメソッドの1つです。

私は個人的にBemは良いと思います、そしてあなたはそれを使うべきだと思います。しかし、私はあなたがそれを使用しない理由も理解することができます。

BEMの意見が何であれ、それはいくつかの利点を提供します。最大の利点は、CSSカスケードでの特定の紛争を回避するのに役立つことです。これは、適切に使用すると、BEM形式で記述されたセレクターが同じ特異性スコア（0,1,0）を持つ必要があるためです。長年にわたり、私は多くの大規模なWebサイト（政府、大学、銀行を考えてください）にCSSを設計しました。これらの大きなプロジェクトは、Bemが本当に輝く場所を発見しました。 CSSを書くことは、あなたが書いたり編集しているスタイルがウェブサイトの他の部分に影響しないことを確信している場合、より楽しいです。

実際、場合によっては、特異性を追加することは完全に受け入れられると見なされます。たとえば、：hoverおよび：focusや::beforeなど、特異性スコアは0,1,1です。ただし、この記事の残りの部分では、他の特定の広がりを期待していないと仮定しましょう。？::after

しかし、私は本当にあなたにベムを売りたくありません。代わりに、より強力なカスケード制御のために、最新のCSSセレクター（例：

、:is()、:has()など）と組み合わせてどのように使用するかについてお話したいと思います。 :where()

最新のCSSセレクターとは何ですか？

CSSセレクターレベル4仕様は、要素を選択するための強力で比較的新しい方法を提供します。私のお気に入りには、すべての最新のブラウザでサポートされており、ほとんどすべてのプロジェクトで安全に使用できるようになっている

、:is()、:where()が含まれます。 :not()

および:is()は基本的に同じですが、特異性に異なる効果があることを除いて。具体的には、:where()の特異性スコアは常に0,0,0です。はい、:where()さえ具体的ではありません。同時に、:where(button#widget.some-class)の特異性は、パラメーターリストの最も特定の要素の特異性です。したがって、使用できる2つの最新のセレクター間のカスケード仕上げに既に違いがあります。 :is()

強力な

リレーショナル擬似クラスもブラウザのサポートをすぐに獲得しています（私の意見では、これはグリッド以来のCSSの最大の新機能です）。ただし、執筆時点では、:has()のブラウザサポートは、生産環境で使用するのに十分ではありません。 :has()

私のbemに擬似クラスを追加させてください...

<code>/* ❌ 特异性分数：0,2,0 */
.something:not(.something--special) {
  /* 所有 something 的样式，除了特殊的 something */
}</code>

ログイン後にコピー

ああ、いや！その特定のスコアを見たことがありますか？ BEMを使用すると、セレクターが0,1,0の特定のスコアを持つことを理想的に期待しています。なぜ0,2,0が良くないのですか？同様の拡張例を考えてみましょう：

<code>.something:not(a) {
  color: red;
}
.something--special {
  color: blue;
}</code>

ログイン後にコピー

2番目のセレクターがソースコードシーケンスに最終的に表示された場合でも、最初のセレクターのより高い特異性（0,1,1）が勝ち、

要素の色は赤に設定されます。つまり、BEMが正しく記述され、選択された要素がHTMLの.something--specialベースクラスと.somethingモディファイアクラスの両方を適用していると仮定します。 .something--special

不適切に使用すると、これらの擬似クラスは予期せぬ方法でカスケードに影響を与える可能性があります。特に、より大きく複雑なコードベースで、後でトラブルを引き起こす可能性があるのは、これらの矛盾です。

ああ。では、今何をすべきか？

私が今言ったことを覚えています

そしてその特異性はゼロですか？これを活用できます：:where()

このセレクターの最初の部分（

<code>/* ✅ 特异性分数：0,1,0 */
.something:where(:not(.something--special)) {
  /* 等 */
}</code>

ログイン後にコピー

）は、通常の特異性スコア0,1,0を取得します。しかし、

- およびそのすべての特異性は0であり、セレクターの特異性をさらに高めることはありません。 .something :where()：ここで、（）により

をネストすることができます

私と同じように特異性についてあまり気にしない人（そして、おそらく多くの人が公平であるため）は、営巣にうまくやっています。いくつかのランダムなキーボードタイピングを使用すると、このようなCSSを取得する可能性があります（SASSを使用してシンプルさを使用していることに注意してください）：

この例では、この例では

コンポーネントがあります。（

<code>.card { ... }

.card--featured {
  /* 等 */  
  .card__title { ... }
  .card__title { ... }
}

.card__title { ... }
.card__img { ... }</code>

ログイン後にコピー

クラスを使用）「注目」カードの場合、カードのタイトルと画像は異なるスタイルである必要があります。ただし、現在ご存知のように、上記のコードによって引き起こされる特異性スコアは、システムの残りの部分と矛盾しています。

.card頑固な特定の狂信者はこれを行うかもしれません：.card--featured 悪くないよね？率直に言って、これはかなりのCSSです。

ただし、HTMLには欠点もあります。経験豊富なBEMの著者は、複数の要素にモディファイアクラスを条件付けて適用するには、複雑なテンプレートロジックが必要であることを痛々しいほど認識しているかもしれません。この例では、HTMLテンプレートは、

modifierクラスを3つの要素（

、

<code>.card { ... }
.card--featured { ... }
.card__title { ... }
.card__title--featured { ... }
.card__img { ... }
.card__img--featured { ... }</code>

ログイン後にコピー

、および

）に条件付きで追加する必要がありますが、実際の例では、より多くの要素を追加する必要があります。声明がたくさんあります。

--featuredセレクターは、特異性レベルを上げることなく、より少ないテンプレートロジックとBEMクラスの少ない書き込みを作成するのに役立ちます。 .card .card__title .card__img以下はSASSのコンテンツと同じです（トレーリング対トレーニングに注意してください）：

:where()モディファイアクラスをさまざまな子要素に適用する代わりにこの方法を選択する必要があるかどうかは、個人の好みに依存します。しかし、少なくとも

今では選択肢があります！

<code>.card { ... }
.card--featured { ... }

.card__title { ... }
:where(.card--featured) .card__title { ... }

.card__img { ... }
:where(.card--featured) .card__img { ... }</code>

ログイン後にコピー

bem htmlをお持ちでない場合はどうすればよいですか？

私たちは不完全な世界に住んでいます。時には、あなたのコントロールを超えたHTMLに対処する必要があります。たとえば、HTMLをスタイリングする必要があるサードパーティスクリプトを挿入します。これらのタグは通常、BEMクラス名を使用して書かれていません。場合によっては、これらのスタイルはクラスをまったく使用しませんが、IDです！

同様に、:where()この問題を解決するのにも役立ちます。このソリューションは、存在することがわかっているDOMツリーのクラスを参照する必要があるため、少し不器用です。

<code>/* ❌ 特异性分数：0,2,0 */
.something:not(.something--special) {
  /* 所有 something 的样式，除了特殊的 something */
}</code>

ログイン後にコピー

を引用して、親要素は少し危険で制限的だと感じます。親クラスが変更された場合、または何らかの理由で存在しない場合はどうなりますか？より良い（しかしおそらく同様に不器用な）ソリューションは、代わりに:is()を使用することです。 :is()の特異性は、そのセレクターリストの中で最も特定のセレクターに等しいことに注意してください。

したがって、上記の例のように

を使用するのではなく、:is()を使用して、存在する（または希望！）存在するクラスを参照することができます。 :where()

<code>.something:not(a) {
  color: red;
}
.something--special {
  color: blue;
}</code>

ログイン後にコピー

常に存在する

は、body要素を選択するのに役立ち、同じ#widgetクラスの存在は:is()セレクターをクラスと同じ特異性スコア（0,1,0）にします。 .dummy-class bodyそれだけです！ :where() これは、CSSをBEM形式で作成する際に得られた

および

がサポートされると、その特異性を元に戻すために
と組み合わせることができます。 `:is()` `:where()`あなたがBEMと完全に命名しているかどうかにかかわらず、セレクターの特異性が良いことであることに同意できることを願っています！ `:has()`

以上がCascadeをBEMと最新のCSSセレクターで飼育しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。