この記事はCSS設計のBEMについて初心者向けに解説しています。CSS設計を取り入れたことがない人も是非この記事を見て、実践してみてください。
BEM（Block, Element, Modifier）は、CSS設計の一種で、HTMLとCSSのクラス命名規則を整理し、保守性と拡張性を向上させるための方法です。以下に、BEMの基本的な要素を分かりやすく説明します。
BEMの命名規則
BEMの命名規則について解説します。
BEMのクラス名は、Block, Element, Modifierの3つに分けて考えます。以下に命名の例とそれぞれを詳しく解説していきます。
命名例
block
block__element
block__element–modifier
blockとelementの間はアンダースコア２つで接続します（ __ ）
elementとmodifierの間はハイフン２つで接続します （–）
Block（ブロック）について
ブロックはウェブページの構成要素を表します。これは独立して存在し、他の要素に依存しないものです。
主に、ボタンやヘッダーなど一つの独立したものがこのBlockに該当します。なので、色や大きさなどの特徴はクラス名に含まないように注意しましょう。
クラス名の例
.header .button .menu など
Element（要素）について
要素はブロック内の部分要素を表します。つまり、ブロックに依存し、ブロック内でのみ意味を持ちます。あくまで、Blockの中の要素なので単独では存在できませんので注意してください。
主に、ヘッダーBlockの中にあるロゴやメニューのアイテムなどブロックの中にある一つの要素だと考えてください。
クラス名の例
.header__logo .button__text .menu__itemなど
注意点として、アンダーバー２つで区切るのは一回までです。以下の例のようなクラス名は使用しないようにしてください。
.header__logo__img .button__text__title .menu__item__text
Modifier（修飾子）について
修飾子はブロックまたは要素の外観や状態を変更するために使用されます。例えば、ボタンのサイズやカラーを変更するときに便利です。単独では存在できませんので注意してください。
あくまで、特徴を区別するためのものなので必ずつける必要はないので、むやみやたらにつけるのではなく必要な時につけるようにしましょう。
クラス名の例
.header__logo–red .button–large .menu__item–active
BEMのメリットについて
- 明確な階層構造: BEMは要素がどのブロックに属しているかを明確に示すため、コードの理解が容易になります。
- 再利用性と拡張性: 各ブロックや要素は独立してスタイリングされているため、再利用が容易で、新しいスタイルを安全に追加することができます。
- 予測可能なクラス名: BEMに従うと、クラス名が一貫性を持つので、他の人にコードが伝わりやすくなるため、開発がスムーズに進みます。
BEMはCSS設計の一つであり、大規模なウェブプロジェクトやチームでの協力に特に役立ちます。ただし、クラス名がやや長くなる傾向があるため、冗長になりすぎないように工夫が必要です。
まとめ
この記事では、CSS設計のBEMについて解説しました。CSS設計を利用することで保守性や可読性があがりコーディングの効率が上がるので是非チャレンジしてみてください。BEMの他にもいろんな設計手法があるので気になる方は調べてみてください。最初は難しいと思いますが、繰り返し継続していけば必ず理解できるので、日々頑張っていきましょう。
「読んだだけでは100%身に付きません」
必ず行動に移してください。
そう言っても、
行動する人は20%
それを継続する人は5%
行動し続けるだけで、
上位5％に入ることができます。
今すぐ行動して上位5％に入り、
Web制作で本気で人生変えたい
そんな人は今すぐ登録してください
今行動しなきゃ、人生変わらないですよ
こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！
是非登録してみて下さい！
コメント