CSS設計における3大メソッド[OOCSS][BEM][SMACSS]

• 予測しやすい
• 再利用しやすい
• 保守しやすい
• 拡張しやすい

OOCSS

概要

• Object Oriented CSS(オブジェクト指向CSS)の略。
• オブジェクト指向に基づいて、考案された設計手法です。
• Yahoo!のNicole Sulivan氏によって開発され、Twitter（とBootstrap）やGithub、Youtubeでも使われています。

考え方

構造と見た目の分離（Separate structure and skin）

• 構造…width,height,border,padding,margin等
• スキン…color,border-color,background-color等

/* ボタンの構造（structure）：共通的な構造を指定 */

.btn {

    width: 200px;

    height: 50px;

    line-height: 50px;

    text-align: center;

}

/* ボタンの見た目（skin） */

.btn-blue {

    background-color: blue;

    color: white;

}

<a class="btn btn-blue">青ボタン</a><br>
<a class="btn btn-red">赤ボタン</a><br>
<a class="btn btn-gray">グレーボタン</a><br>

コンテナと内容の分離（Separate container and content）

/* × 要素にスタイルを指定する */

h2 { font-size:120%; }

/* ○ クラス名を付与してスタイルを指定する

　→要素が変わってもスタイルシートを変える必要が無い */

.subtitle { font-size:120%; }

/* × 場所を限定してスタイルを指定する */

.header .logo {

  background-image:url(/img/logo.png);

  width: 250px;

  height: 25px;

}

.footer .logo {

  background-image:url(/img/logo-small.png);

  width: 100px;

  height: 15px;

}



/* ○ クラス名を付与してスタイルを指定する

  →場所を限定しないので、サイドバーやメインエリアでも使える*/

.logo-large {

  background-image:url(/img/logo.png);

  width: 250px;

  height: 25px;

}

.logo-small {

  background-image:url(/img/logo-small.png);

  width: 100px;

  height:15px;

}

BEM

概要

• Block、Element、Modifierの略。
• HTML構造を明確にすることに軸をおいた設計ツール、及びその手法です。厳格な命名規則が特徴です。クラス名が長くなるので、敬遠する人も多いです。
• ロシアのYandex社によって考案されました。

考え方

命名規則

1. Block (=かたまり)

<div class="wrapper">　/*Block*/<br>
　　<div class="header">　/*Block*/<br>
　　　　<div>logo</div>　/*Block*/<br>
　　</div>
　　<div class="mainarea">　/*Block*/<br>
　　　　<section class="box">～</section>　/*Block*/<br>
　　　　<section class="box box-white">～</section>　/*Block*/<br>
　　　　<section class="box"><h2 class="box__title">～</p></section>　/*Block+Element*/<br>
　　</div>
　　<div class="footer">～</div>　/*Block*/<br>
</div>
</code></pre>
<h4>2. Element (=要素)</h4>
Blockの中の一つ一つの要素がElementに当たります。<br>記事ならば、タイトル(h2)・記事本文(p)などのパーツであるElementから構成されます。<br>
Modifierとの区切りは、「Element&#45;&#45;Modifier」のように、ハイフン2つで接続します。<br>
<br>
<pre><code class="language-html"><br>
<div class="search">　/*Block*/<br>
　<a href="#" class="link"></a>　/*Element*/<br>
　<a href="#" class="link link--disabled"></a>　/*Element+Modifier*/<br>
</div>

3. Modifier (=修飾子)

例：BlockのModifier「Block_key_value」

<ul class="list list_type_disc">
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>
<ul class="list list_type_none">
  <li class="list__item"></li>
  <li class="list__item"></li>
</ul>

例：ElementのModifier「Element_key_value」

<ul class="tubmenu">
  <li class="tubmenu__item"></li>
  <li class="tubmenu__item tubmenu__item_state_current"></li>
    <!-- ↑状態がcurrentであるというclass --><br>
  <li class="tubmenu__item"></li>
</ul>

SMACSS

概要

• Scalable and Modular Architecture for CSS の略。「スマックス」と読みます。
• OOCSS,BEM の流れを汲んだコーディングルールです。 Jonathan Snook氏によって考案されました。
• CSSをより体系立て、より構造化させることで制作とメンテナンスをより容易に行うことを目指します。

考え方

• Base – ベースルール
• Layout – レイアウトルール
• Module – モジュールルール
• State – 状態（ステート）ルール
• Theme – テーマルール

1.Base – ベースルール

2.Layout – レイアウトルール

命名規則

例

.l-main{

  width: 80%;

  float: left;

}

.l-fixed .l-main { /* px指定にする場合は、bodyタグ等にl-fixedクラスを付与 */

  width: 640px;

}

3.Module – モジュールルール

命名規則

例

<div class="l-main">
  <div class="box">
    <h2 class="box-title">boxタイトル</h2>
    <p class="box-description">説明</p>
  </div>
</div>

4.State – 状態（ステート）ルール

例

<div class="l-main">
  <div class="box is-disable">
    <h2 class="box-title">boxタイトル</h2>
    <p class="box-description">説明</p>
  </div>
</div>

.box.is-disable{

  display: none; /* is-disabledが付与されたboxは非表示 */

}

5.Theme – テーマルール

例

/* main.css */

a {

  color: #00f;

}

.box {

  background-color: #fff;

}

/* theme.css：main.cssの後から読み込ませる */

a {

  color: #f00;

}

.box {

  background-color: #eee;

}

まとめ

関連する記事

未経験の僕がWebデザイナーになった方法（職業訓練編） 新卒新入社員がProgateとCODEPREPで学習した結果 CSSメタ言語「Stylus（スタイラス）」の基礎知識 【VSCode】フロントエンド開発時に便利なプラグイン

• Tweet
•