良いCSSとは

良いCSSの定義としてGoogleのエンジニアのPhilip Waltonさんがブログであげているのがこの4つ

予測しやすい
そのクラスがどのような挙動をするのか予測しやすいこと。
再利用しやすい
同じようなコードを作成するのではなくコンポーネント管理をしてコードの記述を最低限にしようということ。
保守しやすい
コードの記入や修正が容易にできるような状態を作っておくということ。
拡張しやすい
すでに存在するコードをさらに拡張したい時に誰でも容易に管理ができる状態を維持すること。

つきやま

OOCSS (Object Oriented CSS / オブジェクト指向CSS)

特徴

入れ物とコンテンツ中身を切り分ける
構造と見た目を切り分ける
場所に依存した指定方法はダメ
OOCSSでは１つ１つのパーツをCSSオブジェクト、またはモジュールと呼ぶ
同じパーツを二度コーディングする必要がなくなる

所感

１つ１つのパーツに適切な名前をつける必要がある
同じパーツを使うので依存関係が生まれる
ちょっとした変更に弱い

参考文献

つきやま

BEM (Block、Element、Modifierの略語)

特徴

開発スピードが速い
長期メンテナンスが容易
チームの規模拡大が容易
コードの再利用が容易
JavaScriptの流用も容易
既存のページが変化していくことを前提として考えられている

所感

class名が冗長になりがちで、単語を省略しすぎると意味が伝わらなくなる
BEMを知らない人から見るとわかりずらい
別のBlockのElementを使い回せない

参考文献

つきやま

SMACSS (Scalable and Modular Architecture for CSS / スマックス)

スケールできて、モジュール的なCSS設計の考え方

特徴

全てのCSSルールが5つに分類される

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

まずサイトのCSSは、はじめにベース（Base）が存在し、そこにレイアウト（Layout）を用意し、そこにモジュール（Module）を置き、モジュールは状態（State）により変化する
と考える

厳格な命名規則などはない

Base - ベースルール

ブラウザのデフォルトスタイルのサイト版
Reset CSSやNormalize CSSを利用する

Layout - レイアウトルール

レイアウト構造の枠組みのこと
（モジュールを配置するための枠組み）

Module - モジュールルール

BEMのBlockと呼んだUIの塊

State - 状態ルール

BEMのModifierと同じようなもの

Theme - テーマルール

CSSのルールの集まりをまとめて切り替えるような仕組みです。
CSSファイルを切り替えるだけでページ全体のテーマが変わるような

ほとんどBEM

参考文献

つきやま

FLOCSS (Foundation Layout Object CSS / フロックス)

OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。

特徴

構造から管理する

Foundation サイト全体のデフォルトスタイルを管理。
├ reset.scss
├ base.scss
├ variable.scss　サイト全体で使える変数
├ mixin　サイト全体で使えるmixnを管理
Layout 各ページを構成するサイト全体で共通したエリアを管理。
├ l-header.scss
├ l-main.scss
├ l-footer.scss
Object サイト全体で再利用できるパターンを持つモジュールを管理
├ Component　小さな単位のモジュールを管理（ボタンなど）
　├ c-button.scss
　├ c-grid.scss
　├ …
├ Project いくつかの↑Componentと、他の要素によって構成される大きな単位のモジュールを管理
　├ p-card.scss
　├ p-profile.scss
　├ ...
├ Utility ComponentとProjectのモディファイア（パターン）で解決することができないスタイル、また、調整のための便利クラスなどを管理。
　├ u-utility.scss
　├ u-color.scss
　├ u-margin.scss
　├ u-padding.scss
├ Theme テーマによる色の切り替えなど、ページ単位の色違いとか
　├ t-blue.scss
　├ ...

所感

ファイル構成まで管理する必要があるのか...?
ほとんどSMACCSでよりルールが厳しい印象

参考文献

つきやま

ECSS (Enduring CSS)

特徴

大規模なWebアプリケーションのCSSを合理的に書くためアプローチ
Enduringは、「長続きする、永続的な、不朽の、我慢強い、辛抱強い」という意味を持っている
命名規則はBEMと似ている
ModuleとComponentの考え方はAtomic Designに似ている
ディレクトリ構造まで管理する