CSS設計を考える上で役立つ Sass the 7-1 pattern

CSS設計とは

CSSは、プロジェクトの規模が大きくなるにつれて読みにくく管理しきれない、 またはスタイルの優先順位が複雑で把握しきれず !important を多用せざるを得ない、 という問題が起きやすくなります。 この問題を解決するためのルールを示したものがCSS設計です。

よいCSS設計が目指すゴールは以下の4点とされています。

上記の目標を達成するための方法として、OOCSS、SMACSS、BEM、FLOCSS、PRECSSなど様々なCSS設計が提唱されてきました。 これらの手法ではクラス名の命名規則であるとか、以下のような部品、ブロック、レイアウトなどの単位で分けて記述、管理をすることが示されています。

• 使い回しが可能なボタンなどの小さな部品
• ボタン、写真、見出しなど小さな部品が集まった、メディアやカードなどの複合ブロック
• ヘッダーやフッターなどのレイアウト

Sass the 7-1 pattern

CSS設計の考えに基づき、部品、ブロック、レイアウトなどの単位を機能別に分けて管理するために便利なのが Sass the 7-1 pattern です。
Sassについてはこちら。

インポート機能（@import）を利用して、単位ごとにファイルを細かく分けて管理します。
全てのファイルを一つのメインファイル（main.scss）にインポートして集約、コンパイルし、 HTMLにはコンパイルされたファイル（main.css）のみをリンクするという方法です。
（@importは2022年10月にサポート終了予定。代わりに@useが採用される。変数のスコープが狭まり、アクセスが限定的になるとのこと。詳しくは こちら。）

作り方

機能別の７つのフォルダと１つのメインファイル（main.scss)を作る。
７つのフォルダについては必要なもののみ作成。特にvendersフォルダ、themesフォルダは小規模プロジェクトでは使わないことが多いと思います。

各フォルダに必要なscssファイルを置き、全てのファイルをmain.scssにインポートする。
全てのファイルがインポートされたmain.scssはmain.cssにコンパイルされます。
作業途中で新しいscssファイルを作成したときは、main.scssにインポートを記述する事を忘れずに。

コンパイルされたmain.cssをHTMLにリンクする。
<link rel="stylesheet" href="css/main.css">

実際のファイル構成例は以下の通りです。
Udemy "Advanced CSS and Sass: Flexbox, Grid, Animations and More!" Natoursより

main.scss には @importの記述のみ。ここに直接スタイルを書き込むことはしません。

文字に関しては _typography.scss、ヘッダーに関するレイアウトなら _header.scss に記述する、というようにファイルを分けることでメンテナンス性が大きく向上します。

参考

Udemy "Advanced CSS and Sass: Flexbox, Grid, Animations and More!"
Sass Gaidelines "the 7-1 pattern"
「CSS設計完全ガイド」