CSS設計を考える上で役立つ Sass the 7-1 pattern
2020年4月11日
CSS設計と聞くと「大きなプロジェクトの場合だけでしょ」と考えてしまうかもしれませんが、そんなことはありません。
この小さなブログもBEMで命名し、これから説明するSassの the 7-1 pattern にて作成していますが、ルールに従ってコーディングを行うことのメリットを強く感じています。
（と言っても試行錯誤しながらなので、私のコードは突っ込みどころ満載だと思いますが。。）
CSS設計の考え方を理解して、サイト全体と各要素の関係性を意識しながらコーディングできるようになれば、コードの影響範囲が明確になり、メンテナンスが楽になります。
ここではCSS設計の概要と、CSS設計を考える上で役立つSassの the 7-1 pattern という手法を紹介します。
CSS設計についての詳しい説明はこちらが非常におすすめです。
分厚い本ですが、とても丁寧に説明されていてわかりやすいです。
「CSS設計完全ガイド」
著者：半田 惇志
CSS設計とは
CSSは、プロジェクトの規模が大きくなるにつれて読みにくく管理しきれない、
またはスタイルの優先順位が複雑で把握しきれず !important を多用せざるを得ない、
という問題が起きやすくなります。
この問題を解決するためのルールを示したものがCSS設計です。
よいCSS設計が目指すゴールは以下の4点とされています。
| predictable | 予測できる |
|---|---|
| reusable | 再利用できる |
| maintainable | 保守できる |
| scalable | 拡張できる |
上記の目標を達成するための方法として、OOCSS、SMACSS、BEM、FLOCSS、PRECSSなど様々なCSS設計が提唱されてきました。 これらの手法ではクラス名の命名規則であるとか、以下のような部品、ブロック、レイアウトなどの単位で分けて記述、管理をすることが示されています。
- 使い回しが可能なボタンなどの小さな部品
- ボタン、写真、見出しなど小さな部品が集まった、メディアやカードなどの複合ブロック
- ヘッダーやフッターなどのレイアウト
Sass the 7-1 pattern
CSS設計の考えに基づき、部品、ブロック、レイアウトなどの単位を機能別に分けて管理するために便利なのが Sass the 7-1 pattern です。
Sassについてはこちら。
インポート機能（@import）を利用して、単位ごとにファイルを細かく分けて管理します。
全てのファイルを一つのメインファイル（main.scss）にインポートして集約、コンパイルし、
HTMLにはコンパイルされたファイル（main.css）のみをリンクするという方法です。
作り方
機能別の７つのフォルダと１つのメインファイル（main.scss)を作る。
７つのフォルダについては必要なもののみ作成。特にvendersフォルダ、themesフォルダは小規模プロジェクトでは使わないことが多いと思います。
| フォルダ | 内容 | 内包するファイル例 |
|---|---|---|
| abstracts | Sassの機能 | variables, mixins, functions |
| vendors | 外部stylesheet | bootstrap |
| base | 全ページ共通事項 | reset, base, typography |
| layout | レイアウト | navigation, header, footer |
| components | 再利用可能な構成部品 | button, card |
| pages | ページ特有の記述 | home, contact |
| themes | テーマ | admin, default |
各フォルダに必要な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設計完全ガイド」
Sassについて
Sassについてはこちらのサイトで詳しく解説されています。
chot.design 1-1. Sassって何？Sassの基本知識と利用方法
Sassのコンパイルには、黒い画面のコマンドラインを使ってRubyやNode.jsをインストールする必要がありましたが、
VS CodeのLive Sass Compilerという拡張機能を使えば、とても簡単にコンパイルしてくれます。
さらにNode.jsでは途中でコンパイルが停止する事がちょくちょくありましたが、VS Codeは安定しているのでおすすめです。
chot.design 1−2. VS CodeでSassをコンパイルする方法とオプションの設定方法