コーディングのときにクラス名に迷うことはありませんか？命名規則がないまま構成が複雑になると、管理ができず、いずれ破綻してしまいます。
コードの再利用やメンテナンスを考えるなら「BEM」と呼ばれる設計方法がおすすめです。理由は二つ。
- 制作会社で多く使われている記述であること
- 学習コストがかからず取得しやすいこと
が挙げられます。
経験年数が上がるにつれて担当するサイト規模も大きくなりますし、初心者コードからのランクアップにも最適です。早い段階で取り入れていきましょう！
目次
BEMとは
BEMとは、Block（ブロック）、Element（要素）、Modifier（修飾）の頭文字をとった略称です。
特にチームで開発するなど、複数人でHTML、CSSを扱うときに有効な設計手法です。共通ルールとして「BEM」を使うことで、構造やスタイルが分かりやすく、後でメンテナンスしやすいというメリットがあります。
また、BEMの特性上、Block（ブロック）はElement（要素）で厳格に構成されているので、コンポーネントと言われる部品として再利用が可能です。開発速度アップにもなりますね。
Block、Element、Modifierとは
複数のリストが並んでいる以下を例に見ていきます。[Block」にあたるのは、独立したそれぞれのリスト、そして画像と文章の「Element」が中に入っています。
「Modifier」は「Block」をホバーしたときに背景色をつけるなどの変化が該当します。
BEMの書き方
BEMの書き方は、組み合わせ次第で形式が少しずつ変わります。まずは3つの基本構成を覚えるところからはじめましょう。それでは、クラス名を意識して以下のボタンを作ります。
Block
複数のボタンがあるので、クラス名を「form」とします。外側にあたる「Block」のタグには必ずクラス名をつけてください。
<div class="form"> </div>
Element
「Block」のクラス名にアンダーバーを2本入れ「Element」の内容に沿ったクラス名をつけます。ボタンという意味で「__btn」とします。
<button type="button" class="form__btn">Button</button> <button type="button" class="form__btn">Button</button>
この他にも、ボタンにアイコンを入れるデザインがありますよね。「Element」の中にクラスが必要な場合は、別に「Block」を作るとスムーズです。
<button type="button" class="form__btn"> <span class="icon">Button</span> </button> <button type="button" class="form__btn"> <span class="icon">Button</span> </button>
「icon」以外に「form__icon」も正解ですが、やや冗長なので「Block」でパーツ化すると見た目がすっきりします。
Modifier
ボタンをホバーするなど「Block」や「Element」に対して装飾を加えるときは、ハイフンを2本入れます。色や形の変化に合わせ、クラス名をつけてください。
<button type="button" class="form__btn">Button</button> <button type="button" class="form__btn form__btn--next">Button</button>
ここでは「form__btn–next」としています。ボタンやタブが数種類ある場合は「form__btn–green」とするのもアリですよ。
BEMのコード例
「BEMの書き方」のコードを全てまとめたものがこちらです。
HTML
<div class="form"> <button type="button" class="form__btn">Button</button> <button type="button" class="form__btn form__btn--next">Button</button> </div>
CSS
button{
border: none;
}
.form__btn{
width: 250px;
max-height: 150px;
padding: 20px;
background-color: #CCCCCC;
color: #FFFFFF;
border-bottom: solid 7px #999999;
border-radius: 5px;
font-size: 1.5rem;
letter-spacing: 0.1rem;
}
.form__btn--next{
background-color: #00ff9d;
border-bottom-color: #00c977;
}
BEM＋Sassでコードを短縮
「BEM」は、分かりやすい、メンテナンスしやすいメリットがある反面、クラス名の長さが目立ちます。そこで「BEM」と相性のいい「Sass」を併用した、コードを短くする方法をご紹介します。
「Sass」では、親セレクタを参照する「&（アンド）」を使って以下のように書くことができます。親のカッコ内に「Element」や「Modifier」を入れます。
.form{
&__btn{
width: 250px;
max-height: 150px;
padding: 20px;
background-color: #CCCCCC;
color: #FFFFFF;
border-bottom: solid 7px #999999;
border-radius: 5px;
font-size: 1.5rem;
letter-spacing: 0.1rem;
}
&__btn--next{
background-color: #00ff9d;
border-bottom-color: #00c977;
}
}
CSSで出力するとコードが変換されているので、見た目やクラス名に変化はありません。
.form__btn {
width: 250px;
max-height: 150px;
padding: 20px;
background-color: #CCCCCC;
color: #FFFFFF;
border-bottom: solid 7px #999999;
border-radius: 5px;
font-size: 1.5rem;
letter-spacing: 0.1rem;
}
.form__btn--next {
background-color: #00ff9d;
border-bottom-color: #00c977;
}
SassはCSSを作成するためのメタ言語です。HTMLコードはそのままで、CSSコードを短くできる、という点を頭に留めてくださいね。
設計方法は「BEM」だけではなく「OOCSS」「SMACSS」などがあり、制作会社、チームによってどれを使うかはさまざまです。
これから勉強を始める方や習得に迷いがある方は、ベーシック且つ広く使われている「BEM」をおすすめします。取得に時間がかからず「合わないな」と途中で手法を変えても、考え方は同じなので独自ルールを覚えるだけでOKです。
再利用しやすい命名規則でメンテナンス性の高いコードを書き、作業の効率化を図りましょう！
