ホームページ  >  記事  >  ウェブフロントエンド  >  BS プロジェクトの CSS アーキテクチャ_必要な CSS のみをロード_交換を体験する

BS プロジェクトの CSS アーキテクチャ_必要な CSS のみをロード_交換を体験する

WBOY
WBOYオリジナル
2016-05-16 12:04:401491ブラウズ

まず、このアーキテクチャの利点について説明します:
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 を呼び出すと、より多くのサーバー リクエストが発生します。解決策は以下に添付されています。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。