FLOCSSを追求したい私の最新ディレクトリ構成

以前、「私なりのFLOCSSディレクトリ構成」という記事を書いた。

それからFLOCSSを使ってサイトを制作してみて、CSS設計について考え直す機会があったので、続編を書いてみたい。

汎用性を高めたい

FLOCSS＋SassでCSS設計をする最大のメリットは、ズバリ「汎用性」だと感じた。

サイトの独自色となる部分（フォント、色、余白）はできる限り変数にしておく。
よくあるレイアウトはパターン化しておく。

Sassファイルはある程度フォーマット化して、複数サイトで使い回していくことを想定したい。
そのためには、「about」とか「news」みたいな、コンテンツに基づいた命名を排除し、極力レイアウト重視・汎用コンポーネント重視でクラス名を付け、Sassを組み上げる必要がある。

その結果のディレクトリ構成

私が使っている、最新のディレクトリ構成はこちら。

scss
├──style.scss
├── foundation
│ ├── _base.scss
│ ├── _system.scss（JS関連）
│ ├── _variables.scss（変数）*
│ ├── _mixin.scss（mixin）*
│ └── _index.scss（まとめて読み込む用）
├── layout
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ ├── _sidebar.scss
│ └── _container.scss
├── component
│ ├── _button.scss
│ ├── _link.scss
│ ├── _heading.scss
│ ├── _figure.scss
│ ├── _icon.scss
│ └── _label.scss
├── project
│ ├── _section.scss
│ ├── _gnavi.scss
│ ├── _mv.scss
│ ├── _media.scss
│ ├── _card.scss
│ ├── _hamburger.scss
│ ├── _slider.scss
│ ├── _accordion.scss
│ ├── _tab.scss
│ ├── _articles.scss
│ ├── _contact.scss
│ ├── _gallery.scss
│ ├── _table.scss
│ ├── _pager.scss
│ ├── _action.scss
│ └── _faq.scss
└── utility
  └── _utility.scss

*は他のファイルから参照したい情報の入ったファイル。

projectファイルが増え、様々な複合モジュールを想定した構成になった。

ファイル名	内容
section	セクション枠（layout寄りの役割）
gnavi	グローバルナビ
mv	メインビジュアル
media	画像と文章が横並び
card	画像と文章が縦並び
hamburger	ハンバーガーボタン
slider	スライダー
accordion	アコーディオンメニュー
tab	タブ
article	記事
contact	コンタクトフォーム
gallery	画像ギャラリー
table	テーブル（縦と横の2種）
pager	ページネーション
action	CTA
faq	Q&A

複合モジュール内の可変要素（画像の比率など）は変数にしておけば、variables.scssをいじるだけで調整できる。

今の悩みどころ

これで「俺のFLOCSSベースが完成！」と思いたいところだが、悩んでいるところがある。

レイアウトの基本である「flex」「grid」は、よくあるパターンを予め組んでおきたい。
それを格納するのは、layoutなのか、projectなのか、はたまたcomponentなのか。

mixinを作るつもりではあるが、あまり見やすくないのが悩ましい。

解決策を求め、今日も検索しつづけ半日を溶かしてしまった・・・
また良い方法が見つかったら追記予定。