OOCSS、BEM、SMACS、MCSS、FLOCSS、一番良いCSS設計手法はなにか。

一番良いCSSの設計手法とは

過去にまとめたCSS設計についての考えをまとめてみた。

今は、どういった設計をすべきだろうか。

ReactやVueを使う場面も増えていく環境で、どの設計手法が一番運用しやすいのか。

CSS設計手法の歴史

2009年

OOCSS

• レイアウトと見た目のclassをわける
• 主コンポーネントと要素コンポーネントに依存性を持たせない
• HTMLをみるだけでレイアウトが想像できる
• baseクラス + base別パターンクラス + 装飾クラスのように構成
  • クラスの組み合わせで表現
  • 大きさ、色、パターンクラスで使い分ける
  • structure + skin
• 備考
  • 場所に依存した指定方法はダメ
  • セレクタにスタイルを当てると、打ち消しスタイルが必要になってしまう
  • ひとつひとつのパーツに名前をつけ、それをオブジェクトとする
  • 何をひとつのモジュールとするのかが難しい
  • baseクラスをページ固有の名詞にしてしまうと汎用性がなくなる
• 注意
  • 見た目のクラスをたくさん作ると膨大になり、何が用意されているかわかり辛い
  • 命名規則をちゃんとしないと後で困る
  • redクラスとかfont16クラスとかいう意見もあるが、微妙

BEM

関連記事

なぜBEMはアンダースコア__、またはハイフン–と2個必要なのか

BEMとは何か の詳しい話はせず、簡単にだけ説明します。詳しくはこちらを確認ください。 https://en.bem.info/ BEMを利用する上で、BEMは気持ち悪いと感じる理由の１つ 「なぜBEMはアンダースコア（[…]

• CSSを共通の命名規則を実装できるためのもの
• 命名規則
  • Block__Element—Modifier
  • Block—Modifier
  • Element—Modifier
  • きもちわるいのでせめてこっち
    • Block_Element-Modifier
• Block
  • 要素のかたまり
• Element
  • Blockの構成要素
• Modifier
  • Block、Elementでスタイルが変わるもの
  • hoverとかも
• クラスの管理方式
  • BlockとElementの区切りはアンスコ2個（__）
    • 1個にしたい
  • BlockやElementを2つ以上の単語で表す時はハイフン1個(-)
    • キャメルケースでいい
  • BlockまたはElementとModifierの区切りはハイフン2個（–）
    • 1個にしたい
  • ModifierのKeyとValueの区切りはアンスコ1個(_)
    • そんなにkeyって必要？
• 感想
  • Elementは1階層まで、2階層まで、のようなルールが必要かも
  • Blockの単位をしっかりすれば、そこまでElementは増えないはず

2012年

SMACSS（すまっくす）

• それぞれを別ファイルにわけて管理する
• ベース
  • reset.cssはここで指定する
    • 基本要素セレクタで指定
  • 汎用スタイルもここ
• レイアウト
  • 今までヘッダー、フッター、メイン、サイドなどidをつけているような主要なもの
  • idを付ける or lを先頭につける
    • l-header
• モジュール
  • BEMでいうBlock + Element
    • block-element
  • レイアウト内のモジュール
  • それ単体でスタイルが独立している
  • どこに配置しても、デザインが崩れないように
• ステート
  • is-aaaなどのクラス名
  • BEMでいうModifier
  • モジュールの別パターン
  • 活性非活性、表示非表示など
  • jsで動的に変更を加えるときに使ったりもする
• テーマ
  • 全体のテーマを変えるとき（使わなそう）
• その他

MCSS

• CSSの管理ルール
• 以下のCSSにわける
  • reset
    1. reset.css
  • base
    1. base_module.css
    2. どのページでも再利用可能なモジュール
    3. .mt10, clearfix とか。
    4. 子孫モジュールの指定をしてはいけない
  • project
    1. project_module.css
    2. 各プロジェクト用にユニークな名前をつける
    3. base base_project のように指定する
  • cosmetic（基本不要？）
    1. cosmetic.css
    2. ie用とか
    3. hoverとかも良いのかな？

FLOCSS

• https://github.com/hiloki/flocss
• OOCSS、SMACSS、BEM、SuitCSS、MCSSを取り入れたルール
• Foundation
  1. resetとか
• Layout
  1. headerとか
• Object
  1. component
     • 最低限の機能を持ったモジュール
  2. project
     • プロジェクト固有
     • componentと一緒に使ったり、固有に作ったりする
  3. utility
     • わずかなスタイル調整の便利クラス
     • component, projectを無駄に増やしていかないようにするもの
     • clearFixとかもここに入れる
• 命名規則
  1. MindBEMdingを採用。オリジナルのBEMは取り入れない。
  2. Block Element Modify
• 基本的に1CSSファイルにまとめる