ホームページ > 記事 > ウェブフロントエンド > BS プロジェクトの CSS アーキテクチャ_必要な CSS のみをロード_交換を体験する
まず、このアーキテクチャの利点について説明します:
1. 大量の CSS 記述作業を、相互に影響を与えることなく簡単に分散できます。
2. 構造が明確で、保守と変更が簡単です。
3. 各 Web ページは、必要な CSS のみをロードします。
要約すると、開発効率の向上、メンテナンス効率の向上、Web ページの読み込み効率の向上です。
上記の CSS 構造図について説明します。
画像の中央にある 5 つの黒いアイコンは Web ページを表しており、上の 1 つはマスター ページ、下の 4 つはサブページです。 VSを使っている人なら誰でも知っているマスターページの役割はASPにおけるインクルードに相当し、共通部分をマスターページ、独立部分をサブページにして開発効率を高めます。
図の上部にある緑色のボックスはグローバル CSS パーツです。これらはスタイル フォルダーに保存され、マスターによって呼び出され、すべてのサブページに適用されます。
図の上部にある青い点線のボックスは単一の CSS パーツであり、各サブページには、独自の一意の CSS ファイルを保存するための対応するフォルダーがあります。これらは、styles/x フォルダーに保存されます。対応する C# ファイルによって制御されます。別のサブページを開くと、マスターは現在のページの CSS を読み込みます。
画像の左下隅にある赤いボックスはテーマ部分で、グローバル スタイルと画像を保存するために使用されます。この機能は緑色のボックスと同じですが、マスター ページではなくサブページによってロードされる点が異なります。この部分は緑のボックスと統合しても問題ありません。
次に、非常に多くの CSS ファイルの用途を紹介しましょう。
—Adm/styles
—Basic.css グローバル基本スタイル
—Layout.css グローバルレイアウトスタイル (サイズ、位置など)
—General.css グローバル美しいスタイル (カラー) 、画像) など)
—Adm/styles/GroupManager フォルダー (例)
—Group_Layout.css グループ ページ固有のレイアウト スタイル
—Group_General.css グループ ページ固有の美しいスタイル
非常に多くの CSS を呼び出すと、より多くのサーバー リクエストが発生します。解決策は以下に添付されています。