web-dev-qa-db-ja.com

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

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

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

cssbem
21
Gil Birman

二重下線は、ブロックのサブ要素を定義するために使用されます。

つまり：

<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。

40
Imran Bughio

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

standardBEM style では、単一の下線は修飾子用に予約されています。また、これらは通常、キーと値のペアの組み合わせを表します。例えば。

.block_align_vertical
.block_align_horizontal
.block__element_size_big
.block__element_size_small

これは、たとえばブール値である inuit.css によって支持されるmodifiedBEM構文とは対照的です。

.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つの追加の利点は、ワークフローの生産性を高めるために、標準命名規則に基づいてライブラリを使用できることです。

9
mlnmln

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

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

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

詳細はこちらをご覧ください SUIT CSS命名規則

6
Colin Bacon

たとえば、ブロックをハイフンまたはアンダースコアで区切ることができるためです。

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

または

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

BEM命名規則 によると、単一のアンダースコアには他に2つの使用法があります。

  1. 修飾子名は、単一の下線（_）でブロック名または要素名から区切られます。
  2. 修飾子の値は、1つのアンダースコア（_）で修飾子名から区切られます。

したがって、要素名をブロック名から分離するために、二重下線が付けられます。

要素名は、二重下線（__）でブロック名と区切られています。

1
Pradeepal Sudeshana