[CSS設計 フロントエンドエンジニア]BEMを触ってみた。

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

BEMとは

• 簡単に言うとフロントエンドの設計方法の一つです。Block,Element,Modifierの略ですね。
• class名にルールがあると思ってもらえば分かりやすいと思います。

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の青色ですよという感じです。

まとめ

• .block
• .block__element
• .block__element--modifier

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

おまけ

• sassで書くととても便利！
• 
• こんな感じで書けるのでとてもわかりやすい！！