ホーム>Web デザインのチュートリアル>CSS チュートリアル

オブジェクト指向 CSS FAQ

著者：Eve Cole 更新時間：2025-01-14 10:19:23

OOCSS で「オブジェクト」を定義するにはどうすればよいですか?

オブジェクトは JAVA のクラスに似ており、オブジェクト指向の特性を維持します。

CSS オブジェクトは 4 つの部分で構成されます。

  1. 1 つ以上の DOM ノードの HTML である可能性があります

  2. ラッパーノードのクラス名から始まるCSSスタイル宣言

  3. 表示用の背景画像やスプライト コンポーネントと同様、

  4. オブジェクトに関連付けられた JavaScript の動作、リスナー、またはメソッド

各 CSS クラスは必ずしも独自のオブジェクトである必要はなく、ラッパー クラスのコンポーネントである可能性があるため、混乱を招く可能性があります。例えば：

<div class="mod">
<div class="inner">
<div class="hd">ブロックヘッド</div>
<div class="bd">ブロック本体</div>
<div class="ft">ブロックフット</div>
</div>
</div>

オブジェクトはクラス mod を持つモジュールです。 4 つのコンポーネント ノードが含まれます (モジュールから独立させることはできません。内部とボディの 2 つのブロックと、ヘッドとフットの 2 つのオプションのブロックを含みます)。

OOCSS はどのようにパフォーマンスを向上させますか?

OOCSS には 2 倍のパフォーマンス上の利点があります。

  1. 再利用性の高い CSS コード。必要な CSS コードは非常に少なく、次のことを意味します。

    • ファイルが小さいため、転送が高速化されます

    • サイト ページ内で呼び出される CSS コードの割合が増加するにつれて、ブラウザーによって再利用またはキャッシュされることが予想されます。

  2. ブラウザに関する限り、再描画とレイアウト計算が少なくなります。

    • 1 つのページで、より多くの CSS ルールが再利用されるほど、レンダリング エンジンが「計算値」に費やす計算時間が減少します。

    • 手動で追加された「拡張」クラスによりオーバーライドされるルールが少なくなります。これは、やはりエンジンがルールを適用する作業が少ないことを意味します。

ID を使用してコンテンツのスタイルを設定しますか?

これは、同じページ (または、両方が適切にキャッシュされている同じサイト) でオブジェクトを再利用する場合のパフォーマンスの「おまけ」です。 ID を使用してスタイルを記述することは、同じページで 1 回だけ使用できます。 @cgriego (twitter) シングルトンと比較しましたが、非常に正確だと思います。非常に特殊なヘッダー メニューなど、ID を使用してスタイルを定義したい場合があります。この場合、ID を使用して特別な要素をサンドボックス化し、ここでのコードがサイトの他の部分に影響を与えないようにすることができます。クラスではなく ID を選択する前によく考えてください。サイトが成長するにつれて、CSS から構築された HTML を他のユーザーが使用することを予測するのは非常に困難になります。選択肢がある場合は、可能な限り拡張性を考慮してください。

テンプレートの頭、胴体、足からIDを削除しようと考えています。複数の自宅エリアを持つ人もいるかもしれません。サイトに複数のヘッダーとフッターがあると推測するのが難しくなりますが、そう考えるデザイナーもいるはずなので、ID は消える可能性が高いです (それほどスムーズではありません。元の記事を読んでください: Someone might have multiple main content area. Multipleサイトのヘッダーとフッターは想像するのがさらに難しいですが、そのようなものを思いつくデザイナーがいるはずなので、ID は消える可能性が非常に高いです。)

一方、ID フックはリンクに最適です。これらを HTML に含めますが、スタイルの記述には使用しないでください。

出典: 99css

関連記事