首頁  >  文章  >  web前端  >  BS專案中的CSS架構_只載入自己需要的CSS_經驗交流

BS專案中的CSS架構_只載入自己需要的CSS_經驗交流

WBOY
WBOY原創
2016-05-16 12:04:401468瀏覽

先說下這套架構的優點:
1.可以方便的把繁重的CSS編寫工作分配出去,而不會相互造成影響。
2.結構清晰,利於維護修改。
3.每一張網頁都只載入自己需要的CSS。

總結下來就是:提高開發效率,提高維護效率,提高網頁載入效率。

下面我解釋一下上面這張CSS結構圖:

圖中間的5個黑色的圖示表示網頁,其中上面單獨的一張是母版頁,下面四張是子頁。使用VS的人都知道母版頁的作用,相當於asp中的include,把共通的部分作成母版,單獨的部分作成子頁,提高開發效率。

圖上方綠色框內的是全域CSS部分,它們存放在styles資料夾中,由母版呼叫並作用到所有子頁。

圖上方藍色虛線框是單一CSS部分,其中每一張子頁都有對應的資料夾用來存放自己獨有的CSS檔案。它們存放在styles/x資料夾中。由各自對應的C#檔案控制:開啟不同的子頁時,母版會載入目前頁的CSS。

圖左下角的紅色框是主題部分,用來存放全域的樣式和圖片。作用和綠色框一樣,只不過它是由子頁載入的,並不是母版統一載入的。這部分和綠色框合併也無大礙。

接下來我介紹一下這麼多CSS檔案都有什麼用?

—Adm/styles
——Basic.css 全域基礎樣式
——Layout.css 全域佈局樣式(尺寸,定位等)
——General.css 全域美觀樣式(顏色,圖片等等)
—Adm/styles/GroupManager 資料夾(範例)
——Group_Layout.css  group頁特有的佈局樣式
——Group_General.css group頁特有的美觀樣式

呼叫這麼多CSS會帶來較多的伺服器請求,以下附上解決方案。

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn