3

これは一種の理論的な質問ですが、ここ数時間私を悩ませています。

私は BEM を学んでいて、これまでのところ素晴らしいのですが、問題があります。このコードがあるとしましょう：

<div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <p>Generated from the CMS</p>
</div>

pを BEM に適したものにするにはどうすればよいですか? 一緒に行ってもいいですか

.main-section p

またはこれは規則に反するでしょうか？BEMに関するすべての例と記事はクラスのみに焦点を当てており、CMSが段落のすべてのグループに異なるクラスを追加することを期待できないため、これに対する答えを見つけることができませんでした.

4

2 に答える 2

6

pBEM の概念の 1 つは、再利用可能なコンポーネントを作成することです。これに反するような要素を使用します。

なんで？

指定するpことで、コンポーネントを使用できる方法を制限しています。正しく表示するには、pタグを使用する必要があります。たとえば、次のマークアップはコンポーネントでは機能しません。

<div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <span>Generated from the CMS</span> <!-- this will not pick up the styles -->
</div>

特異性

もう 1 つの重要なポイントは、BEM が単一のクラス名を使用して、特異性を最小限に抑えることを目指していることです。p特異性を高めたスタイルを作成します。

.main-section p

単一のクラスよりも特異性が高いため、このスタイルをユーティリティ クラスでオーバーライドすることは今では困難です。

CSS の詳細について

ソリューション

代わりに、クラス名を使用して要素を説明するという考え方です。そうすれば、好きなマークアップを使用することを選択でき、コンポーネントは期待どおりに表示されます。例えば

<div class="section-hi main-section">
  <h2 class="main-section_header">Blah</h2>
  <h3 class="main-section_subHeader>Generated from the CMS</h3> <!-- This will work -->
</div>

常にクラス名を使用する必要がありますか?

要素のスタイルを作成し、クラス名を使用しないことが問題ない、または必要な場合があります。たとえば、特定のマークアップでのみ使用したいコンポーネントがあるとします。そうすることは完全に有効です。

概要

原則として、そうしない正当な理由がない限り、常に単一クラスのルールを守るようにしてください。そうしないと、後でつまずきます。

BEM の詳細については、この投稿をお勧めします http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

于 2015-08-07T08:44:36.057 に答える
-5

このコードだけを見ると、それはできますが、さらに<p>要素がある場合はどうでしょうか? すべての要素にクラスを追加できない場合は、いつでもid要素を追加して呼び出すことができます

 #element_id{ }
于 2015-08-05T06:25:44.267 に答える