【モダンなCSS設計手法】FLOCSSとは？コーディングの実務でよく使う運用方法を解説

FLOCSSは、OOCSSやSMACSS、BEMなどのコンセプトを取り入れたCSS設計のことです。 様々なCSS設計の概念やメリットを取り入れているため、管理や運用が破綻しにくい一方で、概念として理解しにくい点も多々あります。 なので、今回は、FLOCSSの構成やSass×FLOCSSの運用方法についてまとめました。 皆さんのコーディングの参考になれば幸いです。 FLOCSS の構成 構成は Foundation、Layout、Object で構成されます。 Foundation foundation は、リセット系 css の読み込みや、そのサイトの基本となるスタイルを定義します。 大概は_base.scssや変数を定義するファイルが入ります。 Layout layout は、ヘッダー、フッター、コンテンツエリアなど、サイト全体の共通部分となるものを定義します。 接頭辞は l-をつけて、