WEBデザイナーも知っておきたい!BEM×Bootstrap の良いとこどりでキレイなCSS 設計

CSSの装飾をするために、HTMLのclass名はどのようなルールで決めていますか? ついやりがちな「自分ルール」が原因で、「ここのclassはどこのこと?」とメンテナンスのときに時間がかかってしまった経験があるのではないでしょうか。

そこで、実際現場で活用されている「BEM(ベム)」と「Bootstrap(ブートストラップ) 」を組み合わせた命名規則をご紹介。自分がマークアップしたソースが「誰がみてもすぐわかる」ものになるようチャレンジしてみましょう。

20160513_1

 

そもそもどうして「WEBデザイナー」がCSSの設計手法を学ぶ必要があるのか?

■スタイルの上書きの繰り返しによる泥沼化

 
チームや個人のメンテンナンスのときに、「CSSのスタイル(装飾)がどこにかかっているのか」がわかりにくいと、その場しのぎの「スタイルの上書き合戦」になってしまいます。

■スタイルの優先度の混乱

 
CSSはある要素に対して複数のスタイルが適用されている場合、その「優先度」に応じて、どれが適応されるかが決まります。優先度を無理矢理コントロールするためには、優先順位を変更する「!important」タグを乱用することになるのです。

※注釈
専門的には優先度ではなく詳細度という記載します。ここでは理解しやすいように優先度という言葉で記載しております。

 

■優先度の混乱による、ミスコミュニケーションの発生

 
「!important」を重ねてしまうと、フロントエンドエンジニアに引き継ぐ段階ではソースが非常に読みづらいものになってしまい、トラブルの原因になってしまいます。

以上の問題を解消できるのが「BEM(ベム)」と「Bootstrap(ブートストラップ)」を組み合わせた命名規則。 これらを参考に「社内の共通ルール」を話し合うことで、スムーズな開発環境が望めます。
 

BEM(ベム)とは

20160513_2

 
Block(ブロック)・Element(エレメント)・Modifier(モディファイア) の頭文字をとってBEM(ベム)と呼ばれています。「BEM(ベム)」は、class名をディレクトリの階層のような定義で命名し、柔軟にメンテナンスができるようにした命名規則の概念です。

■メリット

 
デザイナー
共通のパーツと部分的なパーツを明確に表すことができるため、デザイナー自身もデザインのパターンだしなどの変化に柔軟に対応することができます。
 
コーダー
Sass・Scssで記述するさいに、親要素のclass名を省略した記法でネストできるので、さらにスッキリとしたソースにまとめることができます。
 
フロントエンドエンジニア
コーダーから引き継いだマークアップを殺すことなく、動的作業をプログラムすることができます。
 
チーム
デザイナー・コーダー・フロントエンドエンジニアが「BEM(ベム)」の共通ルールを理解し活用することで、マークアップの認識のズレをふせぐことができます。
 

■デメリット

 
・名前が長くなりすぎることもあるため、逆に見づらいソースになることもあります。
 
・外注案件の場合、BEMを知らないクライアントが違和感をもつことがあります。

■BEMのそれぞれの説明

■各名称の説明

 
Block(塊)
●親要素=ヘッダー・フッター・セクション・アーティクル場合によっては見出しなどの部分です。
 
Elements(要素)
●子要素=見出し・記事本文などがここに分類されます。
 
Modifier(状態)
●BlockやElementsで、装飾に変化があるときに使用する部分です。
 

■書き方

 
まずは「大元の要素」を「Block」というディレクトリのような概念で分類し、そこに属する「子要素」を「Elements」として仕分けしていきます。色違いなどは、「Modifier」でさらに細かく仕分けするという流れです。
 
BlockとElementsを「_(アンダーライン)」でつなぎ、ElementsとModifierは「–(ハイフン)」でつないで表現することが基本となります。この区切り方を「セパレーター」とBEM(ベム)では呼んでいます。
 

【例】
Block_Elements–Modifier 
Block_Block_Elements–Modifier 
Block–Modifier 
※一般的にセパレーターは、2つ並べて記載します。本文も2つ並べておりますが、表記上1つにみえる可能性もあります。

 
では下記の図のように、Menu・Title・Information・EVENT1・EVENT2の5つの「h2要素」に焦点をあてて説明していきます。

20160513_3

BEM(ベム)では大元のh2要素をBlockで仕分けします。レイアウトが繰り返してる子要素に関しては、Elementsでさらに仕分けします。

20160513_4

 
仕分けしたものを実際HTMLで記述すると以下のようになります。EVENT1・EVENT2に関しては、さらに装飾したい場合に備えてModifierも追加しておきましょう。

20160513_5a

 
セパレータの数や区切り方は、認識の統一されていれば基本的に問題はありません。社内ルールを決めて記述していきましょう。BEMでは階層(グルーピング)を意識した命名規則を伝えましたが、ではそれぞれの名称はどう名づけたらよいのでしょうか。
 

Bootstrap(ブートストラップ)とは

20160513_6

Bootstrap(ブートストラップ)は、あらかじめCSSスタイルの素材が用意されているフレームワークのことです。命名規則はOOCSS(オーオーシーエスエス)の設計にもとづいたものになっています。

■OOCSSとは何か

 
OOCSS(オーオーシーエスエス)とはObject Oriented CSS(オブジェクトオリエンテッドシーエスエス)の略です。オブジェクト指向の考え方の一部で、プログラムでよく使われる設計の考え方です。

20160513_7

かんたんにいうと「webページの要素を”パーツ”として考える」ということになります。

20160513_8a

 
要素にclass名を”パーツ”として割り当てることで同じh2要素でも、明確に4種類の”パーツ”として分類できるようになるのです。そしてこの分類した”パーツ”のことを「CSSオブジェクト」とよび、SCSSなどで管理する際、一般的には「module(モジュール)」のディレクトリ内で格納し、メンテナンスします。

以上の概要が「Bootstrap(ブートストラップ)」の命名規則の基盤となっています。「Bootstrap(ブートストラップ)」の考えにもとづいた”各パーツの命名”に関しては「現場でよくつかうid・class名まとめ一覧」を参照してください。
 

BEM(ベム)×Bootstrap(ブートストラップ)を組み合わせた記法はどうなるのか

では、「本題」の各概要を参考に、「キレイなCSS設計」を記述すると以下のようになります。今回はh2要素を囲んでいる親要素をcontainerとして分類します。

20160513_9

▼BEM(ベム)×Bootstrap(ブートストラップ)を組み合わせた記法】

20160513_10a

▼SCSSでネストした記法

20160513_11a

これで、大元のパーツのみの対応はcontainerのみにスタイルをわりふれますし、装飾の変化にも対応しやすい設計にすることができました。

おわりに

今回ご紹介したCSSの設計概念は、実際現場で使わている一つのものにしかすぎません。設計概念はあくまでチームのミスコミュニケーションを防止するためのヒント。ルールにとらわれすぎず、社内で円滑に引き継ぎができるルールを話し合い、現場の生産性を高めることが大切です。

この記事を書いた人:nomal

tadano

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。