この記事はOIC ITCreate Club Advent Calendar 2016 16日目の記事です。
はじめに
ITCreate Club Advent Calendar 2016 16日目を担当させていただきます、@t-kusakabeです。
前回Sassについての記事を書かせていただいたので今回はBEMについて書かせいただこうと思います。
BEMにってなに？
BEMとは、Block、Element、Modifierの頭文字をとったフロントエンド設計方法のひとつです。
通常CSSを書く時、適当にclass名をつけたりデザイン重視になりすぎる事でHTML上のclass名が何をしているのかわからない、又はCSSを書いた本人しか理解できない状態になりがちです。(僕だけかもしれませんが...)
BEMは厳格な命名規則を設ける事で、長期的でかつ再利用しやすいCSSを記述するための設計方法です。
BEMの構成要素
Block、Element、Modifierの3つでBEMは構成されています。(頭文字をとっているので当然ですね)
Blockとは要素の大元になる部分です。後述するElementやMOdifierはこのBlockに属する事になります。
ElementはBlockを親とする要素です。全てのElementはある特定のBlockに属します。
ModifierはBlock、Elementに対して装飾を行う要素です。
命名規則
BEMには厳しい命名規則があります。
- BlockとElementをつなぐときは、アンダースコア2つでつなぐ (Block__Element)
- Modifierにつなぐ場合は、ハイフン2つでつなぐ (Block--Modifier, Element--Modifier)
基本的にはこの二つを守っていればokです。
実際に試してみましょう。
全ての要素はBlockに属するのでまずBlockを定義します。
今回はfooというBlockを作成することにします。
(わかりやすくするために適当にCSSを当てています)
<!DOCTYPE html>
<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class='foo'>
</div>
</body>
</html>
次にElementを定義します。Blockという塊の中にある要素なのでBlockの中に定義します。ElementとBlockを繋げるときはアンダースコア2つでつなぐのでfoo__barとします。
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class='foo'>
<div class='foo__bar'>
</div>
<div class='foo__bar'>
</div>
<div class='foo__bar'>
</div>
</div>
</body>
</html>
次にModifierです。Modifierを繋げるときはハイフン2つで繋げるので、foo__bar__redになります。
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<div class='foo'>
<div class='foo__bar'>
</div>
<div class='foo__bar foo__bar--red'>
</div>
<div class='foo__bar'>
</div>
</div>
</body>
</html>
Sassと組み合わせる
普通にBEMを使うだけだと,class名が長くなるだけなので不便です。
しかし、Sassの & と組み合わせることで長いclass名を省略することができます。
.foo {
}
.foo__bar {
}
.foo__bar--red {
}
通常のCSSがSassと組み合わせると...
.foo {
&__bar {
&--red {
}
}
}
class名を短縮できる！！！
SassとBEMを組みわせることで、わかりやすく再利用しやすいCSSが書けるようになります。
まとめ
BEMを使うことでclass名だけで何をしているのかある程度わかるのでチーム開発にも最適です！
興味を持たれた方は是非勉強してみください。