一：簡單劃分（規模小時）
??? 整站布局:layout.css /*子模塊如有特殊布局，可以通過不同的名稱寫在一起。*/
??? 公用樣式:pubic.css /* 定義些公用字體，顏色，超鏈接等。*/
???
??? 模塊樣式:module.css /*也可將其拆成子模塊。如news.css,download.css等等。*/
??? ??? index.css /*主頁也算一個模塊。*/
二：詳細劃分（規模較大）
??? a)
??? 通用樣式：
??? ??? 整站布局：layout.css /*子模塊如有特殊布局，可以通過不同的名稱寫在一起。*/
??? ??? 公用樣式：pubic.css /* 定義些公用字體，顏色，超鏈接等。*/
??? ??? 表單樣式：form.css /*特殊表單樣式可在表內用名稱區別開。*/
???
??? 區塊樣式：
??? ??? 頭部區域：header.css /*特殊模塊，用名稱區別。各個模塊都定義在一起*/
??? ??? 側邊欄區域：sidebar.css
??? ??? 主體區域：main.css
??? ??? 底部區域：footer.css
??? 可以在發布的時候把這些樣式組合在一起。
??? 為了方便，使用一個CSS來包含，如global.css中使用@import url("xxx.css")來引用區塊樣式
??? b)
??? 通用樣式：
??? ??? 整站布局：layout.css /*子模塊如有特殊布局，可以通過不同的名稱寫在一起。*/
??? ??? 公用樣式：pubic.css /* 定義些公用字體，顏色，超鏈接等。*/
??? ??? ???
??? 區塊樣式：
??? ??? 頭部區域：header.css /*模塊樣式一樣，使用同一個，特殊模塊再另外生成一個header.css*/
??? ??? 側邊欄區域：sidebar.css
??? ??? 主體區域：main.css
??? ??? 底部區域：footer.css
??? ??? 表單樣式：form.css
???

各模塊（主頁也是個模塊）可以通過@import url("xxx.css")來引用區塊樣式。這樣可以容易實現各模塊的自定義。
例：
???
??? 假設有三個模塊新聞，下載，留言，加上主頁就是4個。

??? 下載模塊的頭與其它不相同；主體區域,新聞與留言相同，其它都不相同；底部、表單都一樣；
??? 新聞，留言沒有側邊欄。

???
??? css\download\header.css
??? css\download\main.css
??? css\index\main.css

??? css\header.css
??? css\main.css
??? css\sidebar.css
??? css\footer.css
??? css\form.css
于是就有
??? index.css內容為
??? @import url("css\header.css");
??? @import url("css\index\main.css");
??? @import url("css\sidebar.css");
??? @import url("css\footer.css");
??? @import url("css\form.css");
??? news.css內容為
??? @import url("css\header.css");
??? @import url("css\main.css");
??? @import url("css\footer.css");
??? @import url("css\form.css");
??? download.css內容為
??? @import url("css\download\header.css");
??? @import url("css\download\main.css");
??? @import url("css\sidebar.css");
??? @import url("css\footer.css");
??? @import url("css\form.css");
?? guestbook.css內容為
??? @import url("css\header.css");
??? @import url("css\main.css");
??? @import url("css\footer.css");
??? @import url("css\form.css");
在發布的時候是不是可以不用 @import,而是把各個部分合到一起，減少向服務器請求的次數。
但是在網上看到有人說，單個css文件不能超過30K，影響瀏覽器解釋CSS。
所以要視具體情況而定。

轉載于:https://blog.51cto.com/800myweb/387929

總結

以上是生活随笔為你收集整理的CSS规化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。