Posted at

BEMについて少し。

More than 1 year has passed since last update.

この記事はOIC ITCreate Club Advent Calendar 2016 16日目の記事です。

http://www.adventar.org/calendars/1484


はじめに

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に対して装飾を行う要素です。

https://gyazo.com/db3e0c9a2f2ea0e08faae933b6564989


命名規則

BEMには厳しい命名規則があります。


  • BlockとElementをつなぐときは、アンダースコア2つでつなぐ (Block__Element)

  • Modifierにつなぐ場合は、ハイフン2つでつなぐ (Block--Modifier, Element--Modifier)

基本的にはこの二つを守っていればokです。

実際に試してみましょう。

全ての要素はBlockに属するのでまずBlockを定義します。

今回はfooというBlockを作成することにします。

(わかりやすくするために適当にCSSを当てています)


sample.html

<!DOCTYPE html>

<html>
<head>
<title>sample</title>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>

<body>
<div class='foo'>
</div>
</body>
</html>


https://gyazo.com/c92babe4eadcfe1f299621b277612458


次にElementを定義します。Blockという塊の中にある要素なのでBlockの中に定義します。ElementとBlockを繋げるときはアンダースコア2つでつなぐのでfoo__barとします。


sample.html

<!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>


https://gyazo.com/22e60653c4bd7cab8facd6cb768f72da


次にModifierです。Modifierを繋げるときはハイフン2つで繋げるので、foo_bar_redになります。


sample.html

<!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>


https://gyazo.com/4395fc1c9791bacd69693b96324898e8


Sassと組み合わせる

普通にBEMを使うだけだと,class名が長くなるだけなので不便です。

しかし、Sassの & と組み合わせることで長いclass名を省略することができます。


test.css

.foo {

}

.foo__bar {
}

.foo__bar--red {
}


通常のCSSがSassと組み合わせると...


test.scss

.foo {

&__bar {
&--red {
}
}
}

class名を短縮できる!!!

SassとBEMを組みわせることで、わかりやすく再利用しやすいCSSが書けるようになります。


まとめ

BEMを使うことでclass名だけで何をしているのかある程度わかるのでチーム開発にも最適です!

興味を持たれた方は是非勉強してみください。