Object

Capsule and Separation CSS

Object（オブジェクト）は、Webサイトの情報表示やデザインを再現するための「部品」であり、制作者が任意に名前を与えた「範囲や塊・個体」です。

サイトのロゴ、ナビゲーションといったものから、コンテンツの1ブロック、ボタンやアイコンなどが該当します。

Layout要素を設置している場合には、Objectは目的のLayout要素の内部に配置します。

Objectの設計

Objectの設計にルールや制限はありません。
既存のCSS設計思想を取り入れたり、複数のものをブレンドしたり、環境やプロジェクトに適合したルールを新たに定めるなど、自由に設計できます。

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

「module/」「component/」「parts/」「item/」

Objectの設計内容やルールは、「部分的なimporterファイル」のSassコメントにて簡易的に共有できます。

部品の分類は、CSS設計の要です。
分類方法は、大きさや面積・役割の範囲といった「粒度」、機能や目的などの「役割」、どのページに配置するか、どこに配置するかの「対象」といった3つの視点で考えることができます。

以下、それぞれ3つの視点で分類した例と、その他の例を記載しています。

ObjectのCSSは、Objectに与えた名称単位でカプセル化します。
カプセル化されているものとは、以下の2つを満たすものです。

すべての部品をこのような状態で作成できていれば、何か問題が起こったとしても改修範囲は小さく済みます。
上記のカプセル化に加え、予測性を保ち、ファイルを最少化するための具体例を3種類記載します。

Objectは基本的にClass属性で名前を与えます。（※id属性による命名について制限している訳ではありません。すでに何かルールが確立している場合はそちらを優先してください）

Objectを1つ追加するごとに、そのObjectと同名のSassファイルを1つ追加し、そのファイル内でスタイリングを終えるようにすることで、管理効率を高めます。

HTMLコードにおける内部への要素配置（ネスト）は、HTML上の誤りがない限りとくに制限は無く、設計に応じて記述します。

HTMLコード上でObject内部に配置（ネスト）したものは、親のセレクタから無条件に上書きできます。

（A）の内部に、なんらかの要素（B）を配置した場合、
（B）は親となる（A）の支配下に置かれ、
（A）から（B）への上書きは無条件に可能となる。

Objectに配置できるものは、Baseで定義したもの（もしくは何も定義していないプレーンなHTMLタグ）と、Layout要素、Object要素です。Pagesは最上位概念のため配置できません。

異なるCSS分類の上書きについては、以下を参考にしてください。

Objectのレスポンシブ対応は、該当のObject個別に指定してください。
コードは、基本的に対象のCSSを管理しているファイルに記述し、他のObjectと影響を分離します。

表示幅の条件や、JavaScriptから付与したClassなどによって、そのObjectが単体でどのように反応するのか、「1：1」の関係で捉え、編集します。