ブロック、要素、修飾子

ブロック、要素、修飾子

The **Block, Element, Modifier *(BEM) methodology is a popular naming convention *for classes in HTML and CSS.
Developed by the team at Yandex

HTML文書はブロックと呼ばれるいくつかの領域に分割される.ブロックは、要素と呼ばれるさらなる領域を含むことができます.修飾子は、要素間のマイナーな違いを明確にするために使用されます.これらのすべての要素は一つ以上のクラスに割り当てられます.

ブロック

ブロックは、あなたのウェブサイトのオブジェクトを表し、再利用可能です.あなたのコードのより大きな構造部分として考えてください.一般的に、任意のウェブサイト上で最も一般的なブロックは、ヘッダー、コンテンツ、サイドバー、フッターや検索です.

HTML

<div class="block">
...
</div>

CSS

.block{

}

元素

要素は、それに依存するブロックに属するオブジェクトです.Webページの特定のオブジェクトが要素またはブロックになるかどうかはコンテキストに依存します.オブジェクトが周囲のブロックとは独立して使用される場合、それは要素ではなくブロックであるべきです.反対に、オブジェクトが再利用されず、ブロックのコンテキストでのみ使用できる場合、要素として作成されます.

HTML

<div class="block">
...
   <span class="block__element"></span>
</div>

CSS

.block__element{

}

適切にBEMを使用するには、あなたのウェブサイト内のこれらの要素を再利用することができますので、ネストしたオブジェクトでの作業をお勧めしません.

不良

.block .block__element{

}
div.block__element{

}

修飾子

修飾子は、要素間のマイナーな違いを明確にするために使用されます.

HTML

<div class="block">
...
</div>

CSS

.block--modifier{

}

.block__element--modifier{

}

親ブロックのモディファイアに基づいてブロックの要素を変更するには、次のように使用できます

.block--modifier .block__element{

}

サバとベム

SASSに書いておきたい人はまだ入れ子になった形式で書くことができます.

サバ

.block {

  @at-root #{&}__element {

}

  @at-root #{&}--modifier {

}

}

出力する

.block {

}

.block__element {

}

.block--modifier {

}

BEMの問題

1ラッパ
いくつかのコンテナには、スタイルのための親ラッピングが必要です.それは少し何かのように呼び出すために間違って感じている.封鎖されて、それは外に置かれます.ブロックブロックそのもの.このような命名規則を採用することができます.ブロックラッパーまたは.ブロックコンテナは、それがあなたのブロックに関連していることを明らかにするが、彼らのBEM世界の2つの相互依存的な要素になります.
クラスのすべて
Bemは、コンポーネント内の各要素にクラスを追加する必要があります.しかし、段落タグなどのアプリケーション全体で頻繁に使用される場合は、ルールを破ることもあります.

概要

BEMは、名前空間、継承、モジュールのような概念をCSSの世界にもたらします.しかしながら、BEMはプリプロセッサまたはコンパイラによって使用される技術ではないので、それはあなたとあなたのチームによって適用されなければなりません.さもなければ、あなたがそれを正しくしないならば、あなたはそれが解決するために腐敗するすべての問題を解決するという保証を失います.