今回社内で少し、BEMについて触れてみたので共有。(触ったばかりなので少しだけ。)

#BEMとは

##BEMで書くと便利なこと

接頭辞としてcomponentだったら、.c-block, .c-block__element、projectだったらp-block, .p-block__elementなどとするとコンポーネントかプロジェクトかなどが分かりやすくなる。
最初のうちに結構やりがちな!importantなどで優先順位をあげてしまったり、クラス名を追加して思わぬとこでデザインがおかしくなったりするのを防げる。

##コード

実際に見てもらったほうが分かりやすいかと思います。
今までのコード
ちょっと適当ですがこんな感じで思い通りに動かないなんてこともありました。(量が増えれば増えるほどこういうのが多くなる。。)
BEMでのコード
ざっと説明させていただきます。.textboxがblockになります。
textboxの中にあるtextbox__textがelementになります。__アンスコ2つでelementということを表しています。要はtextboxの中のtextですよと言っているようなイメージです。
そしてtextbox__text--blueはModifierになります。要は--区切りにすることでtextbox__textの状態を表しています。今回の場合ですとtextbox__textの青色ですよという感じです。

##まとめ

うまく伝えられているか不安ですがざっと説明いたしました。

##おまけ