Sassは非常に効率よくCSSを書けますが、FLOCSSを使うと可読性が高まりさらに効率アップするので人気です。 管理もしやすくチームでの作業に最適な一方、FLOCSSの概念やルールが細かく理解しづらい点もある為、今回はSassとの相性が最強なFLOCSSについてまとめます。 FLOCSSのディレクトリ構成 FLOCSSとは、Sassファイルを複数に分けたりクラス名を規則的に書くことで可読性を高めるCSS設計です。 foundation layout object の3つで構成されており、Sassファイルを分割します。 scss ├── foundation │ ├── _base.scss ├── layout │ ├── _footer.scss │ ├── _header.scss └── object ├── component │ ├── _button.scss │ └── _