StrataCSS¶
StrataCSS は、Webサイト制作におけるCSSファイルとレイヤーの管理手法です。
CSSカスケードレイヤー（@layer）の利用を前提に、予測しやすく、破綻しにくく、スケールしやすい設計基盤の構築を目指します。
概要¶
既存の命名規則やスタイリングの規則を置き換えることなく、その外側の設計を担います。
多くのCSS設計手法は、@layer （2022年〜）以前のものです。
先人の知恵を取り入れつつ、@layer を活用した仕組みとして再構築しています。
新たな発明ではなく、既知の手法を “設計の素材” として分解・再合成するメタ方法論です。
ドキュメント¶
特徴¶
以下の特徴をもとに設計を標準化し、プロジェクトに応じて設計をスケールします。
@layerで衝突を防ぐ
優先順位を仕様レベルで固定し、詳細度や!importantの上書きバトルを抑える- スコープで影響範囲を可視化する
全域(Global)とページ個別(Pages)をディレクトリで分け、「どこに効くか」を一目で把握できるようにする - 名前を一致させて予測しやすくする
分類・ディレクトリ・@layerを同じ言葉で揃え、名前から辿れるようにする
最終的に、同じ考え方で FLOCSS や ITCSS などの既存手法を拡張できます。 （応用ガイド）
想定プロジェクト¶
コーポレートサイト、メディアサイト、CMSのテーマ開発など、デザイン先行型のWebサイト制作を想定しています。
SPAによるフロントエンド開発ではなく、従来のWeb制作ワークフローを重視しています。
環境とビルド¶
Node.js環境やVite、Parcelの利用など、特定のビルドツールを前提としません。
ドキュメントのサンプルコードは、ネイティブCSS / PostCSS（postcss-import）と、Sass（SCSS） の利用を想定して記載しています。