CSS設計について、今回（【中級Ex編】）はFLOCSSでやってみます

前回のコーディング課題【中級編】では、初めて設計思想というものを導入し、メジャーなBEMに基づいて行いました。

ただ、やりながら使いづらさを感じていました。

今回、【中級Ex編】までに、gulp導入ついでにpugも取り入れたこと、参考にしたのせっちさんのサイトで紹介していたpugのディレクトリ構成がFLOCSSに似せていること、FLOCSSの情報収集をして【中級編】で感じた課題を改善できそうだと感じたこと、を理由にFLOCSS設計思想に基づいてコーディングをしてみようと思います。

ディレクトリ構成など、参考にさせて頂いたのは下記サイトです↓

[CSS設計] 私のためのFLOCSSまとめ - Qiita

FLOCSSとは「Foundation Layout Object CSS」OOCSSやBEM、SMACSSのいいとこ取りをしたCSS設計思想。構造dartsassに移行しましたので構造を修…

qiita.com

scssだけでなく、JavaScriptで操作・参照するクラス名についても、「なるほど」と思いました。

参考にしてやってみようと思います。