web-dev-qa-db-ja.com

BEMブロック、ネーミングおよびネスト

私はBEMの命名規則に頭を包もうとしています。私はこれで立ち往生しています。私は何かを誤解するかもしれません、見てみましょう。

サイドバーナビゲーションとコンテンツナビゲーションがあります。

サイドバーのナビゲーションは次のようになります

<div class="sidebar">
    <ul class="sidebar__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

そして、私のコンテンツnavはこのように見えます

<div class="content">
    <ul class="content__nav">
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
        <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    </ul>
</div>

.nav__itemのスタイルを設定すると問題が発生します。これらは両方のナビゲーションで発生し、同じスタイルを使用しないでください。ここでいくつかのネストを行う必要がありますか、またはブロックと要素の名前を間違っていますか？

CSSの入れ子の例：

.content__nav .nav__item { background: Red; }

または、次のように名前を付ける必要があります。

<li class="content__nav__item"><a href="#" class="content__nav__link">LINK</a></li>

手伝ってくれますか？

htmlcssbem
60
aventic

BEMクラスの記述方法にはさまざまなバリエーションがあります。そのため、複数の競合する標準があることに注意してください。緩いガイドラインのセットとして始まりました。この回答を投稿して以来、 Yandexは公式の標準を大幅に見直しました （かなり改善されています）。私が使用しているBEMのバージョンは、 Nicolas Gallagherによる記事 に基づいています。

この時点で "Atomic OOBEMITLESS" を使用します。これは、クラスがモジュラーで名前空間であり、セレクターの特異性が低く、CSSのスケーリングを可能にするクラスで状態を切り替えることができるという意味です。 、CSSプリプロセッサの上で、コードをより簡潔で表現力豊かにします。

とはいえ、次のBEM標準を使用します。

  • ブロックとしてハイフンでつながれたクラス名：
    foo-bar
  • ブロック名の後に__が続き、要素のハイフンで区切られたクラス名が続きます。
    foo-bar__fizz-buzz
  • ブロック名または要素名の後に--が続き、その後に修飾子のハイフン付きクラス名が続きます。
    foo-bar--baz、foo-bar--baz__fizz-buzz、foo-bar__fizz-buzz--qux

BEMの短い形式：block-name__element-name--modifier-name

例には3つの異なるブロックがあります。

  1. sidebar、sidebar__nav要素を含む
  2. content、content__nav要素を含む
  3. nav、nav__itemおよびnav__link要素を含む

sidebarおよびcontentブロックは、同じブロックのバリエーションのように見え、.region.region--sidebarおよび.region.region--contentとして表すことができます。

navブロックはul要素で暗黙的であり、明示的にする必要があります。

<ul class="nav"><!-- could be content__nav or sidebar__nav as well if you choose -->
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
    <li class="nav__item"><a href="#" class="nav__link">LINK</a></li>
</ul>

ul要素がnavブロックであることを指定したら、navブロックを変更することは理にかなっています。

<ul class="nav nav--content">
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
    <li class="nav__item nav--content__item"><a href="#" class="nav__link nav--content__link">LINK</a></li>
</ul>

CSSクラスを設定したら、スタイリングallnav__item要素は次のようになります。

.nav__item {
    ...styles here...
}

コンテンツnav__item要素のこれらのスタイルをオーバーライドすることは次のとおりです。

.nav--content__item {
    ...styles here...
}
77
zzzzBov

おそらく BEMのFAQ をご覧ください。

別の要素内の要素のクラス名は何ですか？ .block__elem1__elem2？

ブロックの構造が複雑で、要素がネストされている場合はどうすればよいですか？ block__elem1__elem2__elem3のようなCSSクラスは恐ろしく見えます。 BEM方法によれば、ブロック構造は平坦化する必要があります。ブロックのネストされたDOM構造を反映する必要はありません。したがって、この場合のクラス名は次のようになります。

.block{}
.block__elem1{}
.block__elem2{}
.block__elem3{}

ブロックのDOM表現はネストできますが、

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

クラスの見栄えが非常に良いことに加えて、要素はブロックのみに依存します。そのため、インターフェイスに変更を加えるときに、ブロック全体でそれらを簡単に移動できます。ブロックDOM構造の変更は、CSSコードに対応する変更を必要としません。

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>
42
Henrique Barcelos

_key_value修飾子のペア（ブロックまたは要素は、1つのアンダースコアとその値が別のアンダースコアで修飾子名から分離されます）。

修飾子を互いに区別するのは理にかなっています（例：nav_type_contentおよびnav_type_sidebarはどちらもページ上のnav apperの場所ですが、テーマ、サイズを設定する修飾子、またはajaxを介してリンクを機能させる修飾子は異なります）。 。

また、javascriptのkey：valueペアを使用する方が便利です。

そして、このような規則を使用する既製のコンポーネントとツールが非常に多くあります。 https://github.com/bem/

3
tadatuta