CSSの取り決め（CSS Contract）

コンポーネントが依存してよい、安定したCSSのフックとカスケードの順序です。テーマは文書化されたフック（rb-*とrr-*）を公開するため、コンポーネントは特定のテーマを前提にせずにスタイルを当てられます。

安定したフック

クラス名の名前空間は2つあります。

rb-* — フレームワークが提供する構造のフックとセマンティックデザイントークン（.rb-theme-root、.rb-site、.rb-article、.rb-article-bodyなど）
rr-<feature> — プラグインが描画する最も外側の要素に付くルートフック（.rr-search、.rr-calloutなど）

カスケード順

読み込み順は、テーマのCSSがプラグインの既定スタイルに勝ち、userCssが最後の上書きになることを保証します。

フレームワークの構造CSS → base/appの構造CSS → プラグインの既定CSS → テーマのCSS → 設定のトークンによるインラインスタイル → userCss

Diagram source

flowchart TD
  Base[base/appの構造CSS]
  Plugin[プラグインの既定CSS]
  Theme[テーマのCSS]
  Token[設定トークンのインラインスタイル]
  User[userCss]
  Base --> Plugin
  Plugin --> Theme
  Theme --> Token
  Token --> User

カスケード順の検証

保証されるカスケード順は、フレームワークの構造CSS → base/appの構造CSS → プラグインの既定CSS → テーマのCSS → 設定のトークンによるインラインスタイル → userCssです。この順序は@riebeckite/honoxが強制し、レイヤーごとに別々のスタイルシートを生成して、ヘッダーのコメントでカスケード上の位置を示します。userCssは最後の上書きで、サイト固有の小さな調整に適しています。

テーマCSSの書き方

テーマは安定したフックと、文書化された子孫要素にだけスタイルを当ててください。新しいrb-*/rr-*のクラス名を考案しないでください。対象にするのは.rb-site、.rb-article、.rb-article-layout、.rb-article-header、.rb-article-body、.rb-article-content、.rb-article-meta、.rb-article-footer、.rb-sidebar、および各プラグインが文書化したrr-*のルートフックだけです。BEMの要素（__…）と修飾子（--…）は内部実装の詳細です。

さらに詳しく

CurrentOutgoingBacklink