はじめてのCSS設計
なぜCSS設計をする必要があるのか？
→CSSは簡単に破綻してしまうから
設計やガイドラインなしで作ると、以下のことが原因でCSSが破綻し、見た目が大きく崩れてしまう可能性がある。
★CSSが破綻する原因
1. セレクタの優先順位を考えずにコーディングしてしまう
2. 意図しないスタイルが小要素にまで継承してしまう
3. 同じセレクタに対して多重定義してしまう
4. HTML側の各要素はにスタイルが複合的に適用されてしまう
もしも担当者の入れ替えが起きたり、大きな修正が加わったりすると、これらが原因で容易にCSSが破綻し見た目が崩壊し始める。
新しい担当者は、更にCSSを上書きしなければならず、上記を繰り返し続けその場しのぎのCSS(id・!importantが多用される)まみれになってしまう。
CSSの破綻を回避するためには、
1. 予測しやすい
2. 再利用しやすい
3. 保守しやすい
4. 拡張しやすい
CSSが必要でそのためにしっかりと設計するべきだ。
上記の問題を解決する設計は有名なもので5つある。
- OOCSS
- BEM
- SMACSS
- FLOCSS
APBCSS
OOCSS
Object-oriented CSS
OOCSS では、ページを構成するパーツをレゴブロックの集まりであると考えられる。それらのパーツを組み合わせて作る。
見た目と構造をそれぞれ分けてパーツを定義する。
BootstrapはOOCSSに基づいて設計されている。
例) 構造→ .box {width: 200px, height: 200px;}
見た目→.box_g {color: green;}, .box_y {color: yellow;}
| メリット
・パーツをそれだけで完結させるので破綻しにくい
｜デメリット
・見た目と構造を分けるのが難しい
例）borderは見た目？構造？
- BEM MindBEMding – getting your head ’round BEM syntax – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts BEMは、Block(ページを構成する塊)とElement(要素)をアンダースコア2個(__)と要素のModifier(状態、変化)をハイフン2個(—)で繋げて命名する設計である。 ２つ以上の単語を表すときは、ハイフン1個(-)を使う。
例) ヘッダーにあるナビゲーションのアクティブなリンク
.header-nav__item—active
| メリット
・そのパーツがどこにあるかひと目で分かる
・命名規則が理解しやすいため複数人での開発に適している（コーダー以外も簡単な説明をすればすぐに理解できる）
｜デメリット
・名前が長くなりやすく読みにくい
・場所に依存しているので場所ごと変更があった場合修正コストがかかる
- SMACSS SMACSS は CSSを "ベース"、"レイアウト"、"モジュール"、"ステート"、"テーマ" に分けてスタイルを記述する。
ベース：ベースとなるデフォルトのスタイル
例) 要素セレクタ / reset.css / normlize.css
レイアウト：ページをエリアに分割するスタイル
例) l-header / l-main / l-grid-6
モジュール：再利用可能なスタイル
例) box / logo / nav
ステート：レイアウトやモジュールの状態を表すスタイル
例) is-active / is—nav-focus
テーマ：色、形状、レイアウト、書体などの見た目や振る舞いを表すスタイル
例) t-border / t-color
| メリット
・メンテナンス性を高める
｜デメリット
・cssが増える
- FLOCSS OOCSS、BEM、SMACSS、SuitCSS、MCSS の考え方を取り入れた設計手法。Sassと組み合わせて使われることを前提に作られている。クラスの名前付けはプレフィックス（p-,c-,u-）BEMを参考。
| メリット
・メンテナンスしやすい
・Sassを活かせる
｜デメリット
・projectとcomponentで命名を悩む
ファウンデーション：ベースのデフォルトスタイル。
例) foundation > reset.css / normalize.css
レイアウト：大まかなレイアウト
例) layout > _header.scss / _main.scss
オブジェクト：より細かい部分のレイアウト
例) object > component （パーツ）
object > project （パーツをレイアウトする部分）
object > utility（それ以外のユニーク部分）
- APBCSS http://apbcss.com ATOMIC DESIGNをCSSに落とし込んだCSS。 要素を5つにカテゴライズする。OOCSSとSMACSSを取り入れている。
| メリット
・メンテナンス性が高い
・シンプルな分け方
｜デメリット
・名前の付け方が決まっていない
Atomic：それ以上分解できないパーツ
例) text / icon / btn
Module：UIを包括するモジュール
例) header / mainLogo
Skin：装飾
例) red
Number：ナンバリング
例) one / two / last
State：状態
例) active
Other：その他
例) wrap
★ガイドライン
以上5つの設計の中から、誰にでも理解しやすくフレームワークとも相性がいいAPBCSSを今回の設計方法に選んだ。
以下にAPBCSSを基にしたCSSガイドラインを作成する。
基本的な考え方
・APBCSSを採用
・それ以上分解できない最小のパーツをアトム、それらが集まってできた要素はモジュールと呼ぶ。
・マルチクラスを採用（複数のクラスを組み合わせスタイルを作る）ファイルの分割
作成中（参考APB CSS - Atomic Parts Base CSS -）命名規則
アトム：button, logo,thumnail,icon
モジュール：header, footer, contents, title, thumbnail-list,text-list
スキン：red,blue,wide,high,middle
ナンバー：one, two,list > no3
ステート：active,disable,error
Other：primary, wrap, service-name,ルール
・アトムとモジュールは再利用しやすいようにレイアウトスタイル（float,width,position）をあてない。
・extend,includeはこの順で最初に記述する。
・スタイルはアルファベット順に記述する。
・なるべくpxでレイアウトを作らない。フレームワークで対応できない場合％で指定する。
・入れ子は3階層まで。
・font-sizeはrem。
・作業に入る前に、レスポンシブの分け方を決めておく。