Base

Capsule and Separation CSS

Base/CASC CSSカテゴリ

Base(ベース)は、サイトの基礎や下地となるもので、サイト全域に影響を及ぼすものを管理します。

具体的には、ブラウザごとに異なる「初期スタイル」を整えるためのCSSや、サイト固有のHTML要素そのものに対するデフォルトスタイル、フォームで使用するinput・buttonなどの基本スタイルがこれに該当します。

制作用のSassの設定ファイルも、サイト制作全域に関与するものとしてBaseで管理します。

example

  • ブラウザごとの初期スタイル調整用CSS
  • サイト固有のHTMLエレメント基本スタイル
  • Sassのグローバル変数管理ファイル
  • Sassのミックスインファイル
  • その他、広範囲に影響するような設定ファイル
Base Sassディレクトリ構造 参考例

Baseの設計

サイト全域に影響する「HTMLエレメントのデフォルトスタイル」は、タグレベルにClassを付与することの多い「再利用前提の最小部品」と役割が近くなります。
制作中のリファクタリングを低減するには、どのように役割分担するのかを事前に検討しておく必要があります。

管理ディレクトリの命名

役割と目的優先の分類名により、「base/」は、以下の例ような異なるディレクトリ名に変更しても構いません。

「foundation/」 「ground/」

サイト固有のデフォルトスタイル

HTMLタグのデフォルトスタイルは、多くの制作では「ブラウザ間の初期スタイル調整用CSS」と、「サイト固有のHTMLエレメントに対する基本スタイル」の2種類に分かれます。
どちらもデフォルトスタイルの定義が目的ですが、前者は「異なる環境の表示共通化」、後者は「デザイン再現の下地」とい異なる特性を持つため、別ファイルでの管理を検討します。

別ファイルで管理した場合、「ブラウザ間の初期スタイル調整用CSS」は、初期状態のまま異なるサイトで再利用しやすくなり、サイト固有設定のコードは見通しがよくなる。といったメリットがあります。