CSS設計についてまとめてみた[OOCSS,SMACSS,BEM]

公開日 2020/11/3

今回は、備忘録としてCSS設計について自分なりにわかりやすくまとめてみたいと思います。

今回は、『OOCSS』『SMACSS』『BEM』の3つの設計手法をまとめていきたいと思います。

CSS設計についてまとめてみた[OOCSS]
- ストラクチャーとスキンの分離
- コンテナとコンテンツの分離
CSS設計についてまとめてみた[SMACSS]
CSS設計についてまとめてみた[BEM]
まとめ

CSS設計についてまとめてみた[OOCSS]

OOCSSの特徴として、以下の2つが挙げられます。

・ストラクチャーとスキンの分離

・コンテナとコンテンツの分離

ストラクチャーとスキンの分離

ストラクチャーとスキンの分離とは、簡単に言うと、共通しているプロパティと共通していないプロパティをクラスで分けることでコード量を減らすということです。

以下のコードをご覧ください。

分離されていない例

HTML


<a href="#" class="btn-pink">ボタン</a>
<a href="#" class="btn-blue">ボタン</a>

CSS


.btn-pink {
  //共通部分
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
 //ここまで
  background-color: pink;
}

.btn-blue {
  //共通部分
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
  //ここまで
  background-color: blue;
}

このように、『.btn-pink』と『.btn-blue』のように同じプロパティを書いてしまうとコード量が増えてしまうし、二度手間です。

そこで、共通部分は、クラスでまとめます！

分離後

HTML


<a href="#" class="btn btn-pink">ボタン</a>
<a href="#" class="btn btn-blue">ボタン</a>

CSS


.btn {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
}

.btn-pink {
  background-color: pink;
}

.btn-blue {
  background-color: blue;
}

これでコード量も減り、スッキリしました！

コンテナとコンテンツの分離

コンテナとコンテンツの分離とは、ボタンなどのモジュールを特定の場所に依存させず、他の場所でも使えるようにするということです。

※モジュール　＝　ボタンなどの1つの部品(まとまり)のこと

特定の場所に依存している例

HTML


<div id = "box">
<a href="#" class="btn btn-pink">ボタン</a>
<a href="#" class="btn btn-blue">ボタン</a>
</div>

CSS


#box .btn {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
}

#box .btn-pink {
  background-color: pink;
}

#box .btn-blue {
  background-color: blue;
}

この場合、box以外では、btnクラスが使えない状況になってしまいます。

そこで、#boxを外すことで他の場所でも使えるようにします。

依存していない例

HTML

<div id = "box">
<a href="#" class="btn btn-pink">ボタン</a>
<a href="#" class="btn btn-blue">ボタン</a>
</div>

<section>
<a href="#" class="btn btn-red">ボタン</a>
</section>

CSS


.btn {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
}

.btn-pink {
  background-color: pink;
}

.btn-blue {
  background-color: blue;
}

.btn-red {
  background-color: red;
}

CSS設計についてまとめてみた[SMACSS]

SMACSSの特徴として、以下の3つが挙げられます。

・ベースルール

・レイアウトルール

・モジュールルール

ベースルール

ベースルールとは、bodyなどの要素に対して、共通のプロパティを記載することです。

リセットCSSもベースルールに該当します。

ベースルール例


body {
  background-color: #fff;
}

a {
  text-decoration: none;
}

レイアウトルール

レイアウトルールとは、headerやmainなどの大枠のモジュールに対してのルールです。

主なルール

・headerやmain、footerなどの一度しか使わないであろう要素　➡️　idセレクター『#headerなど』使う

・sectionなどの複数回使うであろう要素　➡️　クラスセレクター『.sectionなど』を使う

・headerやfooterなどの横幅を縮めたい場合は、『.l-narrow #header』のように、#headerの前にクラスセレクターをつける。

・『l-narrow』の『l』は、レイアウトの頭文字のアルファベットであり、見分けやすくするための措置です。

モジュールルール

モジュールルールとは、簡単に言うと、h2やpなどの子要素にもクラスセレクターを使うことで、HTMLの要素を後から変更してもレイアウトが崩れないようにするためのルールです。

レイアウトが崩れやすい例

HTML

<div>
<h2>題名</h2>
<p>テキストテキスト</p>
<h2>題名2</h2>
<a href="#" class="btn-pink">ボタン</a>
</div>

CSS


h2 {
  color: #333;
}

div h2:first-child {
  color: blue;
}


.btn-pink {
  //共通部分
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
 //ここまで
  background-color: pink;
}

このように、クラスセレクターを使わない場合だと、もしh2の順番を変更した場合、意図したレイアウトにならないということがおきます。

そこで、クラスセレクターの出番です！

レイアウトが崩れにくい例

HTML


<div class="box">
<h2 class="item-main-title">題名</h2>
<p class="item-text">テキストテキスト</p>
<h2 class="item-sub-title">題名2</h2>
<a href="#" class="btn-pink">ボタン</a>
</div>

CSS



item-sub-title {
  color: #333;
}

item-main-title {
  color: blue;
}


.btn-pink {
  //共通部分
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 20px;
  margin: 10px;
  border: 2px solid #333;
  border-radius: 4px;
  color: #333;
 //ここまで
  background-color: pink;
}

このように、クラスセレクターを使うことで、HTML要素の順番を変更した場合でも、レイアウトが崩れなくなります。

CSS設計についてまとめてみた[BEM]

BEMの特徴として、以下の4つが挙げられます。

・Block

・Element

・Modifier

・Mix

Block

Blockとは、どこにでも使い回すことのできるパーツのことを言います。

つまり、サイトのメニューや、検索ボックスなどのパーツを使い回すことができるということです。

使用例

HTML


//Block
<ul class="nav-menu">
  //Element
  <li class="nav-menu__item">HOME</li>
  <li class="nav-menu__item">blog</li>
  <li class="nav-menu__item">contact</li>
</ul>

Element

Elementとは、Blockの中身を形成するモジュールであり、Blockの外では、使用することが出来ないモジュールです。

使用例

HTML


//Block
<ul class="nav-menu">
  //Element
  <li class="nav-menu__item">HOME</li>
  <li class="nav-menu__item">blog</li>
  <li class="nav-menu__item">contact</li>
</ul>

このように、Block『nav-menu』の後に、『__』をつけ、Element『item』を指定しています。

注意点

・『nav-menu__item__link』のように、Elementをネストすることは出来ない。

Modifier

Modifierは、BlockやElementの見た目や状態、つまり特定のレイアウトを変えたい場合に使用します。

使用例

HTML


//Block
<ul class="nav-menu">
  //Element
  <li class="nav-menu__item nav-menu__item__text_large">HOME</li>
  <li class="nav-menu__item">blog</li>
  <li class="nav-menu__item">contact</li>
</ul>

このように、Elementの一部の要素（例の場合、HOMEのテキストサイズだけを大きくしたかった）を変更したいときなどに、Modifierを使用する。