FlOCSSベースのCSS設計

更新日: 2022.05.9

レイヤー構成

Sassのフォルダー構成

  • Fundation
    • _setting.scss:変数やWebフォントの読み込み
    • _function.scss
    • _reset.scss
    • _base.scss
  • Layout
    • サイト共通の大枠レイアウトパーツ(divでラップするイメージ)
    • 再利用できる共通レイアウトパーツ
    • ヘッダー・フッターなどのスタイルを全て記述する(中の要素も全て)
    • テンプレートページ(投稿詳細ページなど)も含める
    • ファイル名:「_[ブロック名].scss」
    • クラス名:「.l_[ブロック名]」
  • Compornent
    • 再利用できる共通パーツ(デザインカンプが共通パーツの設計をしていない場合は出てこない)
    • 外側にマージンはつけない(projectでラップする)
    • ファイル名:「_[コンポーネント名].scss」
    • クラス名:「.c-[コンポーネント名]」
  • Project
    • 上記に該当しない全てのパーツ(基本的にここが増えていくイメージ)
    • 無理にコンポーネント化(共通化)を意識しない(3回出てきたらコンポーネント化)
    • 同じページ内で共通するスタイルは@extendでモジュール化する(%p-[ページ名]-[モジュール名])
    • ファイル名:「_[ページ名].scss」
    • クラス名:「.p-[ページ名]-[セクション名]」

FLOCSSからの変更点

  • Objectレイヤーを削除
  • Utilityレイヤーを削除
  • Layoutレイヤーを再定義

FLOCSS+αのその他ルール

クラスの命名規則

  • modifierは省略しない
    • ×:–reverse
    • ○:hoge–reverse
  • クラス名は基本的に全ての要素につける
  • クラス名は省略しない
  • マルチクラスにしない(1要素に対して、クラスは1つ)
  • Elementは2階層以上にしない
  • なるべくカスケードさせない(divを増やすやModifierで対応)
  • クラス名は&で連結しない(クラス名での検索がしづらくなるため)

プロパティの記述方法

  • フォントはremで指定(ブラウザのフォントサイズを反映させるため)
  • 余白・ボーダーの付け方は下記の優先順位で付与する(マージンの相殺を避ける)
    1. 親要素のpaddingで周囲(上下左右)の余白を取る
    2. 1の設定では不可能な、子要素間の余白をmargin-topで取る(隣接セレクターを活用)
  • ショートハンドを避ける(不必要なプロパティを設定してしまうため)

その他

  • サイト内リンクは「#a-」プレフィックスをつける
  • JavaScriptで制御する要素は「js-」プレフィックスをつける(スタイルは指定しない)
  • メディアクエリーはモバイルファーストで実装する(min-widthに統一)
  • JavaScriptの操作はDOM要素のみ(スタイルはCSSでつける)
  • 基本的に、!importantは使わない

参考

https://yumegori.com/flocss

https://haniwaman.com/flocss/

https://hiloki.github.io/s/flocss-layout/

https://zenn.dev/wagashi_osushi/books/94efd21a66ccaa

https://zenn.dev/kagan/articles/1aa466bb6ef8eb