Base
Capsule and Separation CSS
Base（ベース）は、サイトの基礎や下地となるもので、サイト全域に影響するスタイルを管理するものです。
具体的にはブラウザごとに異なる「初期スタイル」を整えるためのCSSや、サイト固有のHTML要素そのものに対するデフォルトスタイル、フォームで使用するinput・buttonなどの基本スタイルがこれに該当します。
制作用のSassの設定ファイルも、サイト制作全域に関与するものとしてBaseで管理します。
example
- ブラウザごとの初期スタイル調整用CSS
- サイト固有のHTMLエレメント基本スタイル
- Sassのグローバル変数管理ファイル
- Sassのミックスインファイル
- その他、広範囲に影響するような設定ファイル
Baseの設計
サイト全域に影響する「HTMLエレメントのデフォルトスタイル」は、タグレベルにClassを付与することの多い「再利用前提の最小部品」と役割が近くなります。
制作中のリファクタリングを低減するには、どのように役割分担するのかを事前に検討しておく必要があります。
サイト固有のデフォルトスタイル
HTMLタグのデフォルトスタイルは、多くの制作では「ブラウザ間の初期スタイル調整用CSS」と、「サイト固有のHTMLエレメントに対する基本スタイル」の2種類に分かれます。
どちらもデフォルトスタイルの定義が目的ですが、前者は「異なる環境の表示共通化」、後者は「デザイン再現の下地」という異なる特性をもつため、別ファイルでの管理を検討します。
別ファイルで管理した場合、「ブラウザ間の初期スタイル調整用CSS」は、初期状態のまま異なるサイトで再利用しやすくなり、サイト固有設定のコードは見通しがよくなる。といったメリットがあります。