StrataCSS サンプル （PostCSS版）
このサイトはStrataCSSの @layer によるカスケード確認用です。
ディレクトリ・レイヤー構成と、外部CSSやWebフォントの取り込みを PostCSS（postcss-import）で実装しています。
このサイトについて About
このページは、StrataCSSの概念実証のために公開しています。
@layerの適用状態を確認するには、ブラウザのインスペクタ（DevTools）をご利用ください。
HTMLの記述やclass属性の命名、CSSプロパティはあくまでサンプルであり、StrataCSSではこれらの規則は定めていないことにご注意ください。
3つの原則
以下のカード型コンテンツは「Components」由来です。
Scoping
Global / Pages スコープにより、CSSが適用されるページ範囲を定義します。
Layering
CSS分類から概念的な階層構造と上書き順を定め、@layer で仕様と一致させます。
Aligning
CSS分類・ディレクトリ・@layer を同じ言葉で揃えることで予測しやすい状態を保ちます。
テスト・サンプル
テスト用のサンプルです。いくつかの上書きサンプルを掲載します。
- リンクボタン
- Components層で定義したリンク形状のボタン
- リンクボタン ＋ .u-fill-accent
- Components層で定義したリンクボタンをUtilities層で上書き
-
テキストのアクセントです
- Pages層で定義したテキストカラーをUtilities層で上書き
このセクションの .test__inner に付与した .animated / .fadeInUp
は、library層に取り込んだ
animate.css のクラスです。
Tokens層で --animate-duration を上書きしています。