ざっくりCSS設計

11552 ワード
SMACSS bem CSS CSS3 Sass CSS テキストリンク

色々なCSS設計

下書き削除したいので、適当に書いてます。あてにしないでね。

OOCSS

SMACSSやBEMの原点となったもの。
決まり事がゆるく、CSSの命名規則など決まっていないので各プロジェクトで決めていく必要がある。

決まり事１：ストラクチャーとスキン

CSSを「ストラクチャー（構造）」と「スキン（外観）」に分けて、それを組み合わせて１つのオブジェクトを作る。
ボタンを例にすれば、「ストラクチャー」が基本のボタンの大きさなどを定義し、
「スキン」でボタンの色などを定義する。

例）ボタンのCSS設計例

<div class="btn btn-primary btn-small">ボタン</div>
<style>
.btn{
  text-align: center;
  display: block;
  padding: 5px 15px;
}
.btn-primary{
  background: red;
  color: white;
}
.btn-small{
  width:25%;
  height: 40px;
}
</style>

決まり事２：コンテナーとコンテント

再利用しやすいように個々のオブジェクトが独立できるよう、複数のオブジェクトを入れる「コンテナー」と複数のオブジェクトである「コンテント」に分ける。
例えば、ログインフォームであれば、フォームのオブジェクトが２つ（emailとpass入力フォーム）とボタンオブジェクトが１つ。それを囲むコンテナー。という形で考える。
コンテナーとコンテントを依存関係にしてはいけない。
（form .btnというセレクタにしてスタイルを作ってしまうとコンテントのbtnがコンテナーのformに依存している）

それ以外はプロジェクトごとに自由に決めていけばいい。

SMACSS

SMACSSではスタイルを５つのカテゴリーに分けて考える。
それぞれの命名規則は決まっていない。レイアウトはl-でもlayout-でもいい。
厳格な決まりがないので、CSS設計初心者が多い現場に導入しやすい。

Base　→　基本となるスタイル
Layout　→　ヘッダーやフッター、カラムといったレイアウトを決定する要素
Module　→　ボタンやタブなどのパーツ
State　→　js操作によって変更するModuleの見た目。アクティブ状態のボタンなど。
Theme　→　WEBページ全体や一部の見た目を変えるスタイル

BEM

BEMではスタイルを「ブロック、エレメント、モディファイ」の３つのカテゴリーに分ける。
クラスの命名ルールも厳格に決っていて、バッティングする危険がない。
ただし、クラス名が長くなる。
クラス名を見れば、それぞれの要素の関係性が分かる。
厳格な決まりごとがあるので、CSS設計経験者が多い現場向け。

Block　→　ページを構成するパーツ。モジュールのこと。Elementが内包されている。ヘッダーやフッター、ボタンやタブなど。
Element　→　Blockを構成する要素。必ずBlockに内包され、Blockに依存する。
Modifier　→　BlockやElementの見た目を変える要素

例）ログインフォームの場合

BlockとElementのCSS設計例

<form class="search">
  <input class="search__input" type="text">
  <button class="search__btn btn btn--primary">
</form>

<nav class="nav">
  <ul class="nav__list">
    <li class="nav__item">
      リスト１
    </li>
    <li class="nav__item">
      リスト２
      <a href="" class="nav__link">
    </li>
  </ul>
</nav>

BEMの命名規則はBlockとElementの主従関係が分かるようにする。
BlockとElementoの主従関係が分かればいいので、.Block__Element__Element__Elementみたいに入れ子で繋いで命名していく必要はない。

ModifierのCSS設計例

``

<style>
.btn{
 ...
}
.btn_color_primary{
 ...
}
.btn_size_small{
 ...
}
</style>

BEM

ブロック内のブロックに対してだけスタイルを変えたい場合

「この箇所のボタンだけmargin-topを変えたい」とかって場合には

悪い例：

<div class="about">
 <div class="about__panel">
  <div class="btn btn__primary">詳しくはコチラ</div>
 </div>
</div>

<style>
 .about .about__panel > .btn{
   margin-top: 10px;
 }
</style>

お互いに依存関係が生まれる。
もし、このような書き方をして後々修正しようと思った時に.btnを修正しようとしてしまう。
（実際は.about内の.btnを修正しないといけないのに）
このCSSの場所も、.aboutと同じ場所に書くことになるので、どこに修正すべきスタイルがあるのか分かりにくい。
（google開発ツールで分かるけど）

良い例：

<div class="about">
 <div class="about__panel">
  <div class="about__btn">
   <div class="btn btn__primary">詳しくはコチラ</div>
  </div>
 </div>
</div>

<style>
 .about .about__btn{
   margin-top: 10px;
 }
</style>

スタイルを適用したい対象の要素を包む要素を作ってあげて、そいつにスタイルを適用させる。
ただし、DOMが増えるので使い過ぎるとdomロードに時間かかるデメリットもある。

SASSのディレクトリ

scss/
 |_ setting/
 |     |_ _color.scss
 |     |_ _font.scss
 |
 |_ tool/
 |    |_ _mixin.scss
 |    |_ _keyframes.scss
 |
 |_ base/
 |     |_ _grid.scss
 |     |_ _l-header.scss
 |     |_ _l-footer.scss
 |
 |_ module/
 |     |_ _form.scss
 |     |_ _btn.scss
 |
 |_ theme/
 |     |_ _spring.scss
 |     |_ _summer.scss
 |
 |_ master.scss ・・・　最終的に全CSSをインポートするためのCSS

ダメなCSS設計例

競合しやすい名前を使う

下記のようなCSSの場合、.primaryは使われやすいのでスタイルがバッティングする危険がある。

<style>
.btn{
  padding: 5px;
  display: inline-block;
}
.primary{
  color: red;
}
</style>

@extendしすぎる

cssを継承しすぎて、追うのが面倒。
継承は子供までにしておくこと。

モジュールにマージンをつけちゃう

パネルの下にマージンをつけておくなどしてしまうと別のモジュール間で影響してしまうのでやめる。
マージンを取りたい時にはモジュールにユーティリティークラスをつけて対応する。

ユーティリティークラスを作りすぎる

その箇所だけマージンを変えたい時などに使える便利クラスだが、マージンやパディングをそれぞれ上下左右、5pxごとに作っていたら、それだけでコードが増える。
デザイナーと相談し、きちんと「パーツ間のマージンは10pxの倍数使う」「フォントサイズは12px,14px,16px,20pxの中で使う」などと決めておく。

StyleDocsを使う