まず、BEMは何ですか
BEMは、ブロック（ブロック）、要素（エレメント）、改質剤（改質剤）、Yandexの方法論によって提案されたチーム名のフロントエンドです。この独創的な方法は、他の開発者に、より透明性と意味のある名前のCSSクラスを作成します。BEM契約はより厳格でなく、より多くの情報が含まれている、彼らは大規模なプロジェクトのために時間のかかるを開発するチームです。
BEMはタグがやってに使用されている他の開発者に伝えることができるだけではキー名です。HTMLコードでクラス属性を閲覧することで、一部のコンポーネントのみがこれらの要素または成分のいくつかの子孫である、といくつかの他のコンポーネントや修飾子フォーム、モジュール間の関連があるかを理解することが可能です。
二、BEM命名規則
.block {}は抽象または成分のより高いレベルを示し
.block__element {}は、完全な全体.blockを形成するため.blockの子孫を意味します
.block - 修飾子は{}または異なるバージョンの異なる状態を表す.block
それは論理的な機能ブロックおよびアセンブリに類似する別個のユニットです。各ブロックは、独自の構造（HTMLテンプレート）、パフォーマンス（CSS）、行動（JS）が含まれています。ブロックの独立性は、コードの再利用を奨励プロジェクト管理を助長している、名前空間をブロック要素は他のブロックに影響を与えないことを保証することを決定しました。
特徴：
図1に示すように、ブロックは、多重、ネストすることができ、およびアセンブリの任意の数の入れ子にすることができます
2、ブロックを使用すると、余白と位置のプロパティを設定することができないことを、レイアウト自体には影響を与えません。
<ヘッダクラス= "ヘッダ">
<DIV CLASS = "ロゴ"> </ div>
<フォームクラス= "検索フォーム"> </ FORM>
</ヘッダ>
要素は、ブロックの不可欠な部分であり、ブロックが使用を分離することができません。
特徴：
図1に示すように、要素はむしろ状態よりもその目的は、単に手段その子要素ブロック
図2に示すように、素子の命名：ブロックname__element-name要素名とブロック名は2つの下線によって分離されています。
<フォームクラス= "検索フォーム">
<入力クラス= "検索form__input">を
<ボタンクラス= "検索form__buttomを">搜索</ボタン>
</ FORM>
外観修飾子定義ブロックの要素と、状態、行動。
<フォームクラスは= "検索フォーム">
<ボタンクラス= " 検索form__buttomを
検索form__buttom - size_s
検索form__buttom - size_m
">搜索</ボタン>
</ FORM>
第三に、例
従来のCSS：
<DIV CLASS = "人">
<DIV CLASS = "女">
<Pクラス= "色"> </ P>
</ div>
<divのクラス= "男性">
<Pクラス= "色"> </ P>
</ div>
</ div>
あなたが仕事を完了するためにそれらを使用することができますが、このようなCSSクラス名は、私たちに十分な情報を教えてくれないが、彼らは曖昧さを示しています。
BEMの命名規則：
<DIV CLASS = "人">
<DIV CLASS = "person_female">
<Pクラス= "person_female -色"> </ P>
</ div>
<divのクラス= "person_male">
<Pクラス= "person_male- -color "> </ P>
</ div>
</ div>
トップブロックが人である、そのような女性と男性のように、独自の要素のいくつかを持っています。我々はコードネームで、それらの間の唯一の関連を知ることができるように、男性と女性は、いくつかの色を持っています。