FlOCSSベースのCSS設計
レイヤー構成
Sassのフォルダー構成
- Fundation
- _setting.scss：変数やWebフォントの読み込み
- _function.scss
- _reset.scss
- _base.scss
- Layout
- サイト共通の大枠レイアウトパーツ（divでラップするイメージ）
- 再利用できる共通レイアウトパーツ
- ヘッダー・フッターなどのスタイルを全て記述する（中の要素も全て）
- テンプレートページ（投稿詳細ページなど）も含める
- ファイル名：「_[ブロック名].scss」
- クラス名：「.l_[ブロック名]」
- Compornent
- 再利用できる共通パーツ（デザインカンプが共通パーツの設計をしていない場合は出てこない）
- 外側にマージンはつけない（projectでラップする）
- ファイル名：「_[コンポーネント名].scss」
- クラス名：「.c-[コンポーネント名]」
- Project
- 上記に該当しない全てのパーツ（基本的にここが増えていくイメージ）
- 無理にコンポーネント化（共通化）を意識しない（３回出てきたらコンポーネント化）
- 同じページ内で共通するスタイルは@extendでモジュール化する（%p-[ページ名]-[モジュール名]）
- ファイル名：「_[ページ名].scss」（ページ単位で読み込むCSSを分ける場合は「[ページ名].scss」）
- クラス名：「.p-[ページ名]-[セクション名]」（ページ単位で読み込みCSSファイルを分ける場合は「.p-[セクション名]」）
FLOCSSからの変更点
- Objectレイヤーを削除
- Utilityレイヤーを削除
- Layoutレイヤーを再定義
FLOCSS＋αのその他ルール
クラスの命名規則
- modifierは省略しない
- ×：–reverse
- ○：hoge–reverse
- クラス名は基本的に全ての要素につける
- クラス名は省略しない
- マルチクラスにしない（１要素に対して、クラスは１つ）
- Elementは２階層以上にしない
- なるべくカスケードさせない（divを増やすやModifierで対応）
- クラス名は＆で連結しない（クラス名での検索がしづらくなるため）
- ２単語以上の際はキャメルケースで記述する（なるべく短くするため）
プロパティの記述方法
- フォントはremで指定（ブラウザのフォントサイズを反映させるため）
- 余白・ボーダーの付け方は下記の優先順位で付与する(マージンの相殺を避ける)
- 親要素のpaddingで周囲（上下左右）の余白を取る
- 1の設定では不可能な、子要素間の余白をmargin-topで取る（隣接セレクターを活用）
- ショートハンドを避ける（不必要なプロパティを設定してしまうため）
その他
- サイト内リンクは「#a-」プレフィックスをつける
- JavaScriptで制御する要素は「js-」プレフィックスをつける（スタイルは指定しない）
- メディアクエリーはモバイルファーストで実装する（min-widthに統一）
- JavaScriptの操作はDOM要素のみ（スタイルはCSSでつける）
- 基本的に、!importantは使わない
参考
https://hiloki.github.io/s/flocss-layout/