css - BEM が修飾子にアンダースコアを 1 つではなく 2 つ使用することが多いのはなぜですか?

Question

BEM では、修飾子を使用すると、2 つのダッシュが意味をなすので、 で修飾子を区別できることを理解していmy-block-my-modifierますmy-block--my-modifier。

しかし、なぜblock__element代わりに使用するのblock_elementですか?

Answer 1

二重アンダースコアは、ブロックのサブ要素を定義するために使用されます。

すなわち:

<nav class="main-nav">
    <a class="main-nav__item" href="#">Text</a>
</nav>

はブロックmain-nav&main-nav__itemはサブ要素です。

これは、ブロックに次のように名前を付ける人がいるために、次のmain_navような単一のアンダースコアと混同される可能性があるためです。main_nav_item

したがって、二重アンダースコアは次のようなものを明確にします: main_nav__item.

Answer 2

2番目の@Imran Bughioの回答に行きますが、問題をさらに明確にしようとしています。

標準の BEM スタイルでは、単一の下線は修飾子用に予約されています。また、通常はキーと値のペアの組み合わせを表します。例えば

.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small

これは、ブール型のinuit.cssなどで支持されている変更されたBEM 構文とは対照的です。

.block--vertical
.block--horizontal
.block__element--big
.block__element--small

変更された構文を使用したときの私の経験から、式の制限にすぐに遭遇します。たとえば、あなたが書くなら

.block--align-vertical
.block--align-horizontal
.block__element--size-big
.block__element--size-small

次のようなキーを記述しようとすると、キーと値の関係は一意ではなくなりますbackground-attachment。

.block__element--background-attachment-fixed

もう 1 つの追加の利点は、ワークフローの生産性を高めるために、標準の命名規則に基づいてライブラリを使用できることです。

• http://bem.info/tools/bem/bem-tools/
• https://github.com/hoho/jquery-bem

Answer 3

また、BEM 構文が強制されているわけではないことにも言及する価値があります。より読みやすい別の構文が見つかった場合は、必ずそれを使用してください。重要なことは一貫性であり、他の開発者が同じ構文で作業できるようにします。

使用される代替構文の例は、Nicolas Gallagher によるSUIT CSSにあります。次の構文を使用します。

ComponentName
ComponentName--modifierName
ComponentName-elementName
ComponentName.is-stateOfComponent

詳細については、 SUIT CSS 命名規則をご覧ください。

Answer 4

ブロックがハイフンまたはアンダースコアで区切られている可能性があるためです。次に例を示します。

.site-search {} /* Block */
.site-search__field {} /* Element */
.site-search--full {} /* Modifier */

また

.site_search {} /* Block */
.site_search__field {} /* Element */
.site_search--full {} /* Modifier */