こんにちは、@desnote_blogです。

過去にまとめたCSS設計についての考えをまとめてみた。
今は、どういった設計をすべきだろうか。
Reactや、vue.jsのように、node.jsを使っていると、ローカルスコープを使ったcssが簡単にかけるので、ほぼこういったルールは気にしなくても問題がなかったりする。

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)