CSSスタイルシート企画・運営体験まとめ_体験交流

テーブルレイアウトを完全に放棄し、xhtml CSS を使用して Web サイトを構築してから 1 年以上が経過しました。 1年以上の練習を経て、ある程度の経験が積めたので、それをまとめるためにこの記事を書いています。 xhtml CSS を使用して Web サイトを構築するプロセスには、Web サイトの CSS スタイル シートの計画と管理という重要な問題があります。

私の CSS 管理の進化の歴史

初めて CSS を使用して Web サイトのスタイルを制御したとき、私は CSS 管理計画について何も知りませんでした。私が作成した CSS は基本的に必要に応じて作成されました。 、追加最初は何も問題ないと思っていたのですが、どんどん追加されて、どんどん汚くなっていきました。見ているだけで頭痛がする。当時、Web サイトの CSS はすべて 1 つのファイルに計画なくまとめられており、順序もあまり規則的ではなかったので、HTML ページ内のクラス名を見つけて、数千もの CSS の中から必要なものを探すことしかできませんでした。 CSS コードの行数。

しばらく考えてまとめた後、サイトのCSSスタイルシートの素案を作りました。スタイル シートには、最初は 3 つの領域が分割されています。

ソース コード例 [www.52css.com]
ベース スタイル シート
レイアウト スタイル シート
クラス スタイル シート
ここで、「 」 「ベース スタイル シート」は、グローバル本文やスタイルなどの一般的なものを記述するために使用されます。「レイアウト スタイル シート」は、ページ全体のフレーム レイアウトに属する一意の ID レイアウトを記述するために使用されます。「クラス」スタイル シート" " は、残りのクラスのスタイルを記述するために使用されます。これらのスタイルは、再利用可能なスタイルと、通常は特別なページに 1 回または数回しか表示されないスタイルに分類されます。

この方法によるレイアウトは効率を大幅に向上させますが、この方法は中小規模の Web サイトにのみ適しています。大規模な Web サイトでのアプリケーションは、少なくとも複数人で共同作業する場合にはまだ少し薄いです。最高の結果や最高の効率を達成することはできません。したがって、比較的完全な CSS 管理計画モデルを以下にまとめます。

より完全な CSS スタイル シート管理モデル

ステップ 1: 個人またはチームは、DIV 図を使用してメイン ページのレイアウトを階層的に描画する必要があります。この DIV 図がデザイン プロトタイプの基礎となります。ページ上で、ページ内のメイン モジュールで使用される ID 名とクラス名をマークアウトして、将来の変更やアップグレードに備えたメンテナンス ドキュメントの作成を容易にします。

ステップ2: CSS構造を分割し、グローバルCSSと各モジュールCSSを確立します。 htmlページ内でグローバルCSSを参照し、グローバルCSS内で各モジュールのCSSを参照します。

ソースコード例 [www.52css.com]
グローバル CSS として global.css を作成し、グローバル CSS 内に「* { … } body { … }」などのグローバル スタイルを定義します。
グローバル スタイルの「@import url("xxx.css");」を通じてモジュール css を導入します。
モジュール CSS の分割については、WordPress と同様の CSS 分割方法を好みますが、一般的には以下のような構造で分割されます。

ソースコード例 [www.52css.com] ]
layout. css /* サイト全体のレイアウト */
public.css /* パブリック結合スタイル */
header.css /* ページヘッダー領域のスタイル */
sidebar.css /* サイドバーエリア スタイル * /
main.css /* メイン エリア スタイル */
footer.css /* 下部エリア スタイル */
index.css /* ホーム ページ エリア固有のスタイル */
form .css /* Form Class style */
#header、#footer、その他のレイアウトの基本的な位置やスタイルの設計など、Web サイト全体のレイアウトは、layout.css が担当し、public.css が担当することを説明します。クラスは class =”navbar font12px” で使用できるため、いくつかの一般的なスタイル定義の場合、このメソッドはスペース分離メソッドを使用して複数のクラス スタイルを適用するため、一般的に使用される、または特殊な環境で変更する必要があるいくつかの共通クラスを定義できます。 header.css、sidebar.css、footer.css などのモジュールは、ヘッダー、サイドバー、ボトム モジュールに対応する CSS スタイル シートであり、モジュールの特定のニーズに応じて追加または削除できます。 website;index.css は、ホームページのいくつかのユニークな要素のための CSS です。ホームページの特殊性のため、CSS を設計するとき、通常、ホームページには特別な扱いが与えられます。一般に、ホームページは CSS の中で最も複雑なページです。ホームページ独自のCSS要素を分類して配置する必要があります @importを使わずにindex.cssを導入することもできます ホームページ上で参照用に別途記載します; form.cssはform要素のスタイルシートです難しくはありませんが、制御するのが面倒です。cssファイルに分けて記述しておくと制御しやすくなります。もちろん、他の同様の要素を使用することもできます。このように対処します。

ステップ 3: 各スタイル シート ファイルにスタイルを記述します。​