CSSネーミング仕様-BEM仕様

BEMはブロック(block)、要素(element)、修飾子(modifier)を意味し、Yandexチームが提案したフロントエンド命名方法論である.この巧みなネーミング方法は、CSSクラスを他の開発者にとってより透明で意味のあるものにします.命名規則のパターンは次のとおりです.

.block{}
.block__element{}
.block--modifier{}

.blockは、より高いレベルの抽象またはコンポーネントを表す.block__Element代表blockの子孫は、完全なものを形成するために使用される.blockの全体..block--modifier代表.blockの異なるステータスまたは異なるバージョン.
以前は「通常」で命名されていたものを見てみましょう.Site-searchの例:

これらのCSSクラス名は本当に不正確で、十分な情報を教えてくれません.私たちはそれらを使って仕事を完成することができますが、それらは確かに非常に曖昧です.BEM記号法では次のようになります.

私たちははっきりと名前が見えます.site-searchのブロック、彼の内部は1つの叫びです.site-search__フィールドの要素.そして.Site-searchにはもう一つの形態があります.site-search--full.
BEMを使うコツは、いつどんなものがBEM形式に書くべきかを知ることです.いくつかのものは確かにブロックの内部に位置しているため、BEMの要素であることを意味するわけではありません.この例では、ウェブサイトのロゴは完全にちょうどいいです.ヘッダーの内部は、サイドバーやフッターの中にある可能性もあります.1つの要素の範囲は任意のコンテキストで始まる可能性があります.そのため、BEMを使用する必要がある場所でのみ使用することを確認します.