CSS設計について思うことをメモとして書いていく
基本はFLOCSSをベースに拡張している。
Sassはdart-sassを使用する。
ファイル構成
- css-root
- component
- funndation
- layout
- _footer.scss
- _header.scss
- index.scss
- block
- pager.scss
- table.scss
- page
- company.scss
- contact.scss
- utility
layoutディレクトリ以下にindex.scssを用意し他のlayoutモジュールをimportする。
componentディレクトリ以下のindex.scss
最終的に一つのCSSファイルに結合するディレクトリはlayoutディレクトリとcomponentディレクトリのみ
pageディレクトリとblockディレクトリが存在理由はFLOCSSでいうProjectの扱いが難しいと感じる場面が度々あったためである。
更にいうとクラス名などの命名で迷う場面と直面する。
使い回すことを考えると、クラス名の抽象度は高くなる。Project内に配置されるクラス名はこの命名を考える際に結構な頻度でボトルネックになることがある。
その解決策として、FLOCSSでいうProjectディレクトリをpageディレクトリとblockディレクトリとして分離させた。
リファクタリングをする時に使い回す可能性のあるクラスをblockディレクトリ内に転記する。
// /layout/index.scss
@use 'footer';
@use 'header';
...CSSにはTypeScriptのような型が無いためどうしても、「「「運用でカバー!」」」なところが出できてしまっている。
この悪しき風習を少しでも改善するためにCSS設計やルールは必要なことだと思う。