ウミ
クル

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

CSS設計と聞くと「大きなプロジェクトの場合だけでしょ」と考えてしまうかもしれませんが、そんなことはありません。
この小さなブログもBEMで命名し、これから説明するSassの the 7-1 pattern にて作成していますが、ルールに従ってコーディングを行うことのメリットを強く感じています。
(と言っても試行錯誤しながらなので、私のコードは突っ込みどころ満載だと思いますが。。)

CSS設計の考え方を理解して、サイト全体と各要素の関係性を意識しながらコーディングできるようになれば、コードの影響範囲が明確になり、メンテナンスが楽になります。
ここではCSS設計の概要と、CSS設計を考える上で役立つSassの the 7-1 pattern という手法を紹介します。

CSS設計についての詳しい説明はこちらが非常におすすめです。
分厚い本ですが、とても丁寧に説明されていてわかりやすいです。

「CSS設計完全ガイド」
著者:半田 惇志

CSS設計完全ガイド

CSS設計とは

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

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

predictable 予測できる
reusable 再利用できる
maintainable 保守できる
scalable 拡張できる

The Goals of Good CSS Architecture
和訳「CSS設計完全ガイド」

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

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

Sass the 7-1 pattern

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

インポート機能(@import)を利用して、単位ごとにファイルを細かく分けて管理します。
全てのファイルを一つのメインファイル(main.scss)にインポートして集約、コンパイルし、 HTMLにはコンパイルされたファイル(main.css)のみをリンクするという方法です。

作り方

機能別の7つのフォルダと1つのメインファイル(main.scss)を作る。
7つのフォルダについては必要なもののみ作成。特に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より

the 7−1 patternフォルダ例
main.scssファイル例

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をコンパイルする方法とオプションの設定方法