「イマドキCSS設計」の解説 – 後編：BEMとSMACSSと実際の運用について

こんにちは！basara669です。

勉強会で使った「イマドキCSS設計」の資料の解説の最終回で、BEMについてもう少し具体的な例を書きました。また、SMACSSについても軽く触れ、実際にこれらの概念を取り入れて、どのように運用したか書きました。

他の記事はこちら

• 「イマドキCSS設計」の解説 – 前編：css設計の必要性
• 「イマドキCSS設計」の解説 – 中編：BEMについて

BEMでのコーディング例

もう少しBEMでのマークアップを紹介したいと思います。

このサイトの右上に検索ボタンがあり、左にはログイン用のボタンがあります。
この2つはデザインはとても似ているのですが、marginが違ったりしていて、レイアウトされている場所が違ったりします。

このような場合どのようなコードになるかというと、

searchという大きなBlockがあり、その中にBlockを配置するための、器となるElementを書きます。そして、その器となるElementの中に.buttonのBlockを配置することでレイアウトを作ります。

そして、.search__layoutButtonに対し、レイアウトとなるCSSを記述します。

.search__layoutButton{
//レイアウトを記述
}
.login__layoutButton{
//レイアウトを記述
}

buttonのコードを変更すること無く、配置したい場所に配置が出来ます。

さらに、このサイトのbuttonなのですが、大きさも少し違います。
こういった場合はどうすべきでしょうか？

機能ごとで書いてた場合は、親要素にsearchというclassがあるのでこのように書きたくなってしまいます。

.button{
width: 80px;
padding: 10px;
background: #aaa;
font-size: 16px;
text-align: center;
}
.login.button{
width:60px;
paddint:5px;
font-size:14px;
}

しかし、サイドバーでも同じサイズのbuttonを付けたいときに、loginという命名規則ではおかしいです。
結局、CSSに新たな記述をしたり、この要素を見つけることが出来ず、同じようなbuttonを追加で書いてしまったりします。

これではコードの再利用性が低いです。

このような場合、下記のようなコードにして、クラスを複数つけることで、サイズの変更を実現します。

.button{
width: 80px;
padding: 10px;
background: #aaa;
font-size: 16px;
text-align: center;
}
.button__size_small {
width: 60px;
padding:5px;
font-size: 14px;
}

いかがでしょうか。BEMの書き方はめんどくさいですが、大規模なサイトであればあるほど、有効だと思います。

SMACSSとは

『SMACSS』はJonathan Snookという方が提唱した、スタイルガイドです。
これは電子書籍になっていて、日本語に翻訳されてます。

購入するとPDFや.mobiなど様々な形式でファイルが渡されるので、KindleやiPadなどでも読めます。

詳しく知りたいという方はぜひ買ってみてください。

SMACSSの方は簡単に触れていきたいと思います。

SMACSSの要素

SMACSSにはBEMとは違う要素がありますが、基本的な思想はそれほど変わりません。
SMACSSでは下記5つの要素が書かれてします。

• ベース：デフォルトの見た目やリセットCSS
• レイアウト：エリア分け
• モジュール：BEMでいうところのBlockとElement
• ステート：BEMでいうところのModifier
• テーマ：カラーリング関連

ベース

リセットCSSなどを使っている方も多いと思いますが、そういったCSSをこのベースに入れます。
また汎用的に使えるCSSもこちらに書きます。

レイアウト

BEMには無かった、レイアウト関連のものはここに記述をします。そして、接頭語には”l-“や”layout-“をつけてわかりやすくします。

モジュール

BEMで言うところの、BlockやElementにあたります。BEMではBlockの中にElementがありましたが、SMACSSではモジュールの中にモジュールを書くイメージです。

ステート

これはBEMで言うところの、Modifierにあたります。接頭語に”is-“を付けます。

テーマ

テーマでは全体的なカラーリングについて書きます。接頭語には”theme-“を付けます。

SMACSSでのマークアップ例

先ほどのメニューをSMACSSで書くとこんな感じになります。

まず大きな違いは、レイアウトを決めるクラスである、.l-headerで全体を囲っている点です。
それ以外は記述の違いはありますが、BEMに似た書き方をしています。

実際どう運用しているか

BEMやSMACSSは絶対ではない

BEMやSMACSSなどが賑わせていますが、これが絶対ではありません。
半年後は別のCSS設計が賑わせているかもしれないです。

こういった概念のイイトコどりをするのがベストだと思います。

こういったコードの再利用性などは個人でも色々考えてきたと思います。それを体系的にまとめ、言語化したのがBEMやSMACSSだと思います。
変に意識することは無いと思います。

こうして運用してみた！→基本はBEM +αでSMACSS

私の場合はこれら2つの概念を学んでみて、BEMのほうが要素少なくてわかりやすかったので、BEMを基本にSMACSSで補完することにしました。

まず、ベースと言う概念があったほうが、わかりやすかったので、SMACSSのベースを取り入れて、そこに汎用的なCSSやリセットCSSを入れるようにしました。

次にレイアウトも取り入れました。
やはり、BEMだけだとBEM＞BEM＞BEMとなり、若干レイアウトがわかりづらかったりします。また、レイアウトに接頭語があったほうが可読性が向上しました。

Blockやモジュールごとで動くというのはスタイルガイドと非常に相性も良いです。
スタイルガイドは1つ1つの要素ごとに表示するので、意識的に独立したBlockを書くのでとても良かったです。

有名なところだと「Starbucks Style Guide」とかだと思うのですが、ここで言っているBlockの独立性というのをわかりやすいかと思います。

まとめ

CSS設計に結局答えは無いと思います。ここで書いたことが絶対だなんて全く思ってませんし、BEMとSMACSSのどちらが優れているという話でも無いと思います。

そして、無理して取り入れる必要もありませんし、命名規則も厳格に考える必要もありません。合わなければ合わないというのであればそれでいいと思います。

小規模なサイトでは書く量が増えてしまうだけかもしれませんし、チームの中で一人がやっていても全く意味がありません。

ただ、BEMやSMACSSで意識されている、コードの再利用性や共同して作業出来るという点、そして、他のCSSに依存しないBlockという概念はとても有効だと思います。BEMやSMACSSの概念をうまく取り入れて、それぞれの環境で使いやすいものに変化させる、そして、それをチーム内で共通意識としていくことが大切です。

その共通意識を形成するものとして、スタイルガイドというのが役に立つはずです。

basara669の感想

またまた長文ですが、読んでいた皆様本当にありがとうございます！

こんなことを勉強会では話していましたｗ
こんなに反響があるってことはみんなCSSの書き方に悩んでるんでしょうね〜。

自分も常に悩んでます。
これでいいのかな〜。これってなんだっけかな〜とかとか
もっと自分も精進せねば！

皆様のフロントエンドライフに少しでも役立つと嬉しいと思って書きました。

ではでは