CSSカテゴライズ例
- Base：サイトの基礎・下地
- Layout：大枠の領域分割要素
- Component：情報表示に使う小規模の部品
- Other：ユーティリティcssやjQuery用cssなど
- style.scss：上記4つのフォルダ内にあるscssファイルをすべて@useで統合
Base
Base（ベース）は、サイトの基礎や下地となるもので、サイト全域に影響するスタイルを管理する。具体的にはブラウザごとに異なる「初期スタイル」を整えるためのCSSや、サイト固有のHTML要素そのものに対するデフォルトスタイル、フォームで使用するinput・buttonなどの基本スタイルがこれに該当する。
【例】
- ブラウザごとの初期スタイル調整用CSS
- サイト固有のHTMLエレメント基本スタイル
- Sassのグローバル変数管理ファイル
- Sassのミックスインファイル
- その他、広範囲に影響するような設定ファイル
- _base.scss：html , body , h1～h6 , a , img , button といった要素の初期値設定
- _form.scss：各フォームの基本スタイルを上書きする
- _mixin.scss：サイズ計算、メディアクエリ、テキスト表示といったミックスインを記述
- _reset.scss：リセットCSSを記述（@useでは一番上（最優先）に記述）
- _setting.scss：ページ幅、フォントサイズ、フォントの種類、画像パス、色の種類などを変数で記述
Layout
Layout（レイアウト）は、サイトヘッダー・フッター・メイン・カラムといった「大きな領域」を間仕切ることで、Component同士の干渉や影響を最小化するためのボックスである。
この要素には、背景色やボーダーなどのデザインの再現に直接関わる装飾的なスタイルは極力避ける。
内部にComponentを配置するための「透明な箱・間仕切り」として、独立した状態で設置する。
【例】
- サイト骨格用のコンテナ定義ファイル
- 表示領域幅を制御するコンテナ定義ファイル
- グリッドシステムなどのコンテナ定義ファイル
- その他、独自にlayoutに定義するファイル
- _container.scss：サイト全体のレイアウト設定
- _header.scss：ヘッダ領域のレイアウト設定
- _gnav.scss：グローバルナビのレイアウト設定
- _breadcrumb.scss：パンくずリストのレイアウト設定
- _menu.scss：サイドメニューのレイアウト設定
- _section.scss：セクション部のレイアウト設定
- _grid.scss：グリッドシステム（カラム数）のレイアウト設定
- _pagetop.scss：ページトップのレイアウト設定
- _footer.scss：フッター領域のレイアウト設定
Component
Component（コンポーネント）は、Webサイトの情報表示やデザインを再現するための「部品」であり、制作者が任意に名前を与えた「範囲や塊・個体」である。
サイトのロゴ、ナビゲーションといったものから、コンテンツの1ブロック、ボタンやアイコンなどが該当する。
Layout要素を設置している場合には、Componentは目的のLayout要素の内部に配置する。
【例】
ページタイトル、表、タグ、アコーディオン、タブ、ボタン、ニュース（投稿）リスト、ページネーション、カード、投稿部レイアウト、FAQ、メインビジュアル、各ページのコンテンツ独自の表示パターン（お問い合わせページ） など
Other
ユーティリティclassやslickなどのjQueryで使用するcssを管理する。
