SCSSファイルの組織立て

ファイル間の移動が面倒とか補完が効きやすいからとかいうひどい理由からあまりSCSSファイルを細かく分けてなかった。積極的にplaceholder selector利用するようになったりで見通しが悪くなることが多かったのもあって、もうちょっと組織立ててやった方がいいなとこのウェブサイトのSCSSで色々試してる。変数定義のカテゴリ分けとクラス名の追加・整理、そしてSCSSファイルのパーツ単位での分割まではやった。

色を変更する時は色の変数を格納しているSCSSファイルを編集すれば良い、というような形にするためにバンバン変数を作ってやることにした。そうすることによって設定する基本カラースキームの色は直接CSSプロパティーの値で使わないようになり、論理的な値指定を行えるようにもなる。

クラスの追加・整理は読めないとかよく言われる属性セレクタ使うのやめたのが大きな変更。他にも子要素セレクタとかCSS駆使してます感あふれるセレクタは控えて、わかりやすいクラス名を付けるようにしたりとか。

SCSSファイルの分割はBEMで言うところのblockを意識して分けた。「ここのデザインを変更したい時はこのファイルを編集すれば良い」というのが実現できるので、パーツ単位での分割は悪くなさそう。ただしSassの仕様上、フラットにファイルをばら撒かないといけない気がするので、こういう点ではうまく組織立っていない。

CSSでもある程度は出来ていたデザインとHTMLの分離を、Sassによりほぼ完全に行うことが可能になる。しかしそのせいでSassからHTMLをきちんと把握しながら書くのが難しい程度に見通しも悪くなる。場合によっては生成されるCSSすら把握しづらいことも。特にplaceholder selectorのようなHTMLをほとんど意識せずに組み立てられるものをよく利用してると顕著。なのでそこにもうひとつBEMのような強力な組織化を行える概念を挟むことによりSassからもHTMLからも見通しが良くなるんじゃないかと思う。それがSCSSファイルの組織立てに最も重要な点なはず。