私なりのFLOCSSディレクトリ構成

CSS設計を勉強中。
「クラスの命名ルール」が決まっている、というだけではなく、Sassと一緒に使ってこそ、真価を発揮するのがCSS設計だということはわかった。

ただ、Sassに関する情報を集めてみても、@import廃止に対応した事例が少ない。
特に書籍はほぼ無い。

Sassは各案件で使い回すことを想定して組むもの、と思っているので、ある程度しっかり地固めしたい。
まずはBEM版（Blockごとにscssファイルを分割）を作ろうと思ったが、参考事例はFLOCSSが多く、自分もFLOCSSを使いこなせるようになりたかったので、DartSass＆FLOCSSで検討することにした。

素晴らしき先人の知恵

まずは夢ゴリさんで、@importを使わないファイル読み込みの設計を学ぶ。

Sassで@useと@forwardを使ったサイト設計 – @importから切り替える手順／夢みるゴリラ

次に、自分の使用イメージに合わせて柔軟性を持たせる方法を模索。
「吉本式」の解説がほんとうにわかりやすい。

吉本式 Web制作のコーディングガイドライン

また、Map関数を使ったメディアクエリのMixinづくりは、こちら↓を参考にした。

Sassのmixinでメディアクエリを管理する／Free Style
ここから、ブレイクポイントはBootstrapに合わせたかたちに変更。

私なりのディレクトリ構成

最終的にはこんな感じに。

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
├── component
│ ├── _button.scss
│ ├── _grid.scss
│ ├── _media.scss
│ └── _title.scss
├── project
│ ├── _articles.scss
│ ├── _contact.scss
│ ├── _comments.scss
│ ├── _gallery.scss
│ ├── _gnavi.scss
│ ├── _hamburger.scss
│ ├── _profile.scss
│ └── _section.scss
└── utility
  └── _utility.scss

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

（※最新の構成は上記からさらに進化しているので、こちらを参照願います）

Objectフォルダは作らず、Layout、Component、Project、Utilityの各フォルダを並列に。
階層を浅くすることで見通しやすく。

他から読み込みたいファイルは、変数を入れる「Variables」とmixinを入れる「mixin」の2つだけなので、これらは一度、同じ階層の「index」に@forwardで読み込む。
（baseとsystemは@useで読み込む）
同階層のbaseファイルには@use “variables” as *; @use “mixin” as *;で読み込んでおく。

あとはLayout、Component、Project、Utility内の各ファイル先頭に@use “../foundation” as *;

最後に、全てを統合する「style.scss」を作成。

/* foundation */
@use "foundation";

/* layout */
@use "layout/footer";
@use "layout/header";
@use "layout/main";
@use "layout/sidebar";

/* object */

// Component
@use "component/button";
@use "component/grid";
@use "component/media";
@use "component/title";

// Project
@use "project/articles";
@use "project/contact";
@use "project/comments";
@use "project/gallery";
@use "project/gnavi";
@use "project/hamburger";
@use "project/profile";
@use "project/section";

// Utility
@use "utility/utility";

ちなみに、Layout、Component、Project、Utilityの各フォルダ内にindexを作り、style.scssでは各フォルダを読み込む形式も良いと思う。
私はファイル数を極力絞るために、style.scssはfoundationのみフォルダ読み込み、他はファイルの読み込みとしている。

なお、ResetCSSはCDNで読み込むこととしている。
最終的に書き出されたCSSがResetと混ざると、見かけが複雑になってしまうため。

今後も改良していくと思うし、今は取り急ぎ「as *」で読み込んでいるけど、必要に応じて略称を設定するかも知れない。
（現時点ではここで読み込み元をはっきりさせる必要性を感じていないが、@useが浸透したら変わる気がする・・・）