Design Note

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

  • 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ファイルにまとめる