web-dev-qa-db-ja.com

BEMサブブロックの命名

私はhtml + cssを書くためにBEMアプローチを使用しています。この構文では：

  • ブロック：block_name
    • 要素：block_name__element_name
    • 修飾子：block_name__element_name--修飾子

別のブロック内にブロックがあると混乱します。たとえば、ヘッダーでは、ヘッダーを参照できるブロックにし、ナビゲーションとロゴをブロックにします。これらのナビゲーションブロックとロゴブロックをsite_header内にあるものとして参照したいと思います。しかし、私はそれをどのように書くでしょうか？ block_name__sub_block_nameのようなブロックの連鎖はかなり長いようです。

誰かがこの例を書く典型的な方法を持っていますか？

<div class="site_header__logo">
    <a class="site_header__logo__link">
        <img class="site_header__logo__image">
    </a>
</div>

<nav class="site_header__main_nav">
    <ul>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">Home</a>
        </li>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">About Us</a>
        </li>
        <li class="site_header__main_nav__item">
            <a class="site_header__main_nav__link">Contact Us</a>
        </li>
    </ul>
</nav>

<div class="site_header__phone">
    <p class="site_header__phone__number">
        555.555.5555
    </p>
</div>
cssnamingoocssbem
16
jeremyhoover

ロゴ、メインヘッダー、電話は、BEMWebサイトで次のように指定されているblockの定義に適合していると思います。

ブロックは独立したエンティティであり、アプリケーションの「ビルディングブロック」です。ブロックは、単純または複合（他のブロックを含む）のいずれかです。

取得したのは、複合ブロック（site_header）内の3つの単純なブロック（logo、main_nav、およびphone）です。これは実際には、 BEM方法論の定義ページ で例として示されているHEAD複合ブロック）と非常によく似ています。

だから私はそれをこのように書くでしょう：

<div class="logo">
    <a class="logo__link">
        <img class="logo__image">
    </a>
</div>

<nav class="main_nav">
    <ul>
        <li class="main_nav__item">
            <a class="main_nav__link">Home</a>
        </li>
        <li class="main_nav__item">
            <a class="main_nav__link">About Us</a>
        </li>
        <li class="main_nav__item">
            <a class="main_nav__link">Contact Us</a>
        </li>
    </ul>
</nav>

<div class="phone">
    <p class="phone__number">
        555.555.5555
    </p>
</div>

「ロゴ」は名前としてあまりにも一般的すぎて、プロジェクト内の他のタイプのロゴを表さないと思われる場合は、「company_logo」のような別の名前を付けてください。

スタイリングに関して、BEMは、ブロック修飾子と要素修飾子を使用して、さまざまなスタイルを表すことをお勧めします。たとえば、電話番号を太字にしたい場合は、CSSでその電話番号のクラス修飾子を作成し、次のようにHTMLに適用できます。

.phone__number--bold {
    font-weight: bold;
}

<div class="phone">
    <p class="phone__number phone__number--bold">
        555.555.5555
    </p>
</div>

修飾子は、他のブロック内のブロックのスタイル設定よりも好ましい方法です。したがって、しないでくださいこれを行います：

.site_header .phone__number {
    font-weight: bold;
}

これには例外が1つあると思います。それは、内部のブロックに「場所に依存するスタイル」を与えたい場合です。 「ロゴ」ブロックに左マージンを与えたいとしましょう。次のような修飾子を作成する代わりに：

.logo--Push_20 {
    margin-left: 20px;
}

OOCSSの2番目の原則 -コンテナとコンテンツを分離し、ジョブをコンテナに任せることをお勧めします。

.site_header .logo {
    margin-left: 20px;
}
14
katranci

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>
13
Henrique Barcelos