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

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

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

???
??? 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內(nèi)容為
??? @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內(nèi)容為
??? @import url("css\header.css");
??? @import url("css\main.css");
??? @import url("css\footer.css");
??? @import url("css\form.css");
??? download.css內(nèi)容為
??? @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內(nèi)容為
??? @import url("css\header.css");
??? @import url("css\main.css");
??? @import url("css\footer.css");
??? @import url("css\form.css");
在發(fā)布的時(shí)候是不是可以不用 @import,而是把各個(gè)部分合到一起，減少向服務(wù)器請(qǐng)求的次數(shù)。
但是在網(wǎng)上看到有人說，單個(gè)css文件不能超過30K，影響瀏覽器解釋CSS。
所以要視具體情況而定。

轉(zhuǎn)載于:https://blog.51cto.com/800myweb/387929

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。