新聞資訊

推薦的(de)一(yī)種組織CSS的(de)方法：base.css+common.css+page.css。将網站(zhàn)內(nèi)的(de)所有(yǒu)樣式，按 照(zhào)職能(néng)分(fēn)成三大(dà)類：base、common和(hé)page。在一(yī)般情況下(xià)，任何一(yī)個(gè)網頁的(de)最終表現(xiàn)都(♥dōu)是(shì)由這(zhè)三者共同完成的(de)。這(zhè)三者并不(bù)是(shì)并列結構，而是(shì)層疊結構。


    page
    ↓
    common
    ↓
    base


1.base層


這(zhè)一(yī)層位于三者的(de)最底層，提供CSS reset功能(néng)和(hé)粒度最小(xiǎ★o)的(de)通(tōng)用(yòng)類---原子(zǐ)類。
這(zhè)一(yī)層會(huì)被所有(yǒu)頁面引用(yòng)，是(shì)頁面樣式所需以來(lái)的(de)最底層。這(zhè)一(yī)層與具體(tǐ)UI無關，無論何種風(fēng×)格的(de)設計(jì)都(dōu)可(kě)以引用(yòng)它，素以base層要(yào)力求精簡和(hé)通(tōng)♥用(yòng)。這(zhè)一(yī)層的(de)核心職能(néng)猶如(rú)房(fáng)子(zǐ)的(de)地(dì)基一(yī)樣重要(yào)，亦扮演著 (zhe)網頁中最基礎的(de)同樣重要(yào)的(de)角色。


2.common層


這(zhè)一(yī)層位于中間(jiān)，提供組件(jiàn)級的(de)CSS類。與common層相(xiàng)關的(de)是(shì)™樣式的(de)模塊化(huà)，模塊化(huà)可(kě)以從(cóng)樣式和(hé)行(xíng)為(wèi)兩個(gè)層面來(©lái)考慮。我們可(kě)以将頁面內(nèi)的(de)元素拆分(fēn)成一(yī)小(xiǎo)塊一(yī)小(xiǎo)塊功能(néng)和(hé)樣式相(xiàng)對(duì)獨&立的(de)小(xiǎo)模塊，這(zhè)些(xiē)模塊有(yǒu)些(xiē)是(shì)很(hěn)少(shǎo)重複的(de)，有(yǒu)些(xiē)是(←shì)會(huì)大(dà)量重複的(de)，我們可(kě)以将大(dà)量重複的(de)模塊視(shì)為(wèi)一(yī)個(gè​)組件(jiàn)。我們從(cóng)頁面盡可(kě)能(néng)多(duō)地(dì)将組件(jiàn)提取出來(lái)，放(fàng)在common層裡(lǐ)。co‌mmon層就(jiù)相(xiàng)當于MVC模式中的(de)M（Model模型）。為(wèi)了(le)保證重用(yòng)性和(h£é)靈活性，M需要(yào)盡可(kě)能(néng)将內(nèi)部實現(xiàn)封裝，對(duì)可(kě)能(néng)會(huì)經常變化(huà)的(de)部分(fēn)提供靈 活的(de)接口。不(bù)同的(de)房(fáng)子(zǐ)選用(yòng)不(bù)同的(de)門(mén)窗(chuāng)，co♦mmon層就(jiù)像建房(fáng)時(shí)用(yòng)到(dào)的(de)門(mén)窗(chuāng)，房(fáng)子(zǐ)選用(yòng)的(d✔e)門(mén)窗(chuāng)就(jiù)好(hǎo)比這(zhè)個(gè)網站(zhàn)選用(yòng)的(de)UI組件(jiàn)。門(mén)窗<(chuāng)最好(hǎo)與整個(gè)房(fáng)子(zǐ)的(de)風(fēng)格保持一(yī)緻。同樣，網站(zhàn)最好(hǎo)讓UI組件(jiàn)的(de)風(fē₽ng)格保持相(xiàng)同。UI組件(jiàn)是(shì)網站(zhàn)中的(de)單位，在網站(zhàn)內(nèi)部可(kě)以高(gāo )度重用(yòng)，但(dàn)不(bù)用(yòng)的(de)網站(zhàn)可(kě)能(néng×)會(huì)用(yòng)不(bù)同的(de)UI組件(jiàn)。
所以，comman層的(de)網站(zhàn)級的(de)，不(bù)同的(de)網站(zhàn)有(yǒ≥u)不(bù)同的(de)common層，同一(yī)個(gè)網站(zhàn)隻有(yǒu)一(y←ī)個(gè)common層。common層是(shì)放(fàng)在一(yī)個(gè)common.css文(wén)件(jiàn)裡(lǐε)，還(hái)是(shì)按照(zhào)功能(néng)劃分(fēn)放(fàng)在諸如(rú)common_form.css、common_imagelist.css的(de)→多(duō)個(gè)文(wén)件(jiàn)裡(lǐ)，需要(yào)根據網站(zhàn)規模來(lái)決定。在團隊合作(zuò)中，common層最好(hǎo)由一 (yī)個(gè)人(rén)負責，統一(yī)管理(lǐ)。


3.page層


網站(zhàn)中高(gāo)度重用(yòng)的(de)模塊，我們把它們視(shì)為(wèi)組件(jiàn)，放(fàng)在c₩ommon層；非高(gāo)度重用(yòng)的(de)模塊，可(kě)以把它們放(fàng)在page層。page層位于最高(gāo)層，提供頁面級的(de)樣式。p₩age層就(jiù)好(hǎo)比是(shì)房(fáng)間(jiān)內(nèi)的(de)裝飾畫(huà)，不(bù)同房(fáng)間(jiān)的(dλe)裝飾畫(huà)各不(bù)相(xiàng)同。
page層是(shì)頁面級的(de)，每個(gè)頁面都(dōu)可(kě)能(néng)有(yǒu)自(zì)己的(de)page層CSS.page層的'(de)文(wén)件(jiàn)可(kě)以分(fēn)離(lí)出來(lái)寫，也(yě)可(kě)以放(fàng)在一(yī)個(gè)page.c↔ss文(wén)件(jiàn)裡(lǐ)，根據頁面配上(shàng)注釋，分(fēn)塊書(shū)寫，便于維護。實例：


/*首頁*/
.test{}
.test2{}


/*關于我們*/
.test3{}
.test4{}


/*聯系我們*/
.test5{}
.test6{}


這(zhè)樣做(zuò)可(kě)能(néng)會(huì)帶來(lái)些(xiē)冗餘，比如(rú)，首頁的(de)css文(wén)件(jiàn)裡(lǐ)€帶有(yǒu)“關于我們”、“聯系我們”頁的(de)page層CSS文(wén)件(jiàn)，而這(zhè)些(xiē)對(duì)首頁的(de)樣式毫無影(yǐng)響γ。但(dàn)是(shì)，對(duì)于文(wén)件(jiàn)過于分(fēn)散和(hé)集中的(de)問(wèn)題并沒有(yǒu)完美(měi)的(de)解決☆方法，我們需要(yào)根據實際情況做(zuò)些(xiē)适當的(de)折中。比起讓page層的(de)CSS文(wén)件(jiàn)過于繁多(duō)和>(hé)零散，把它們集中在一(yī)個(gè)文(wén)件(jiàn)中更便于維護，且便于浏覽器(qì)緩存，浏覽網站(zhàn)時(shí)隻有(yǒu)↔首頁的(de)下(xià)載時(shí)間(jiān)較長(cháng)，浏覽其他(tā)頁面時(shí)反而較快(kuài)。當然，page.css還(hái)是(shì)應當ε越精簡越好(hǎo)，能(néng)用(yòng)base層和(hé)common層的(de)CSS解決的(de)​，就(jiù)盡量不(bù)要(yào)用(yòng)到(dào)page層。


base層基本上(shàng)不(bù)需要(yào)維護，common層修改的(de)幅度不(bù)會(huì)很(<hěn)大(dà)，通(tōng)常隻由一(yī)個(gè)人(rén)負責維護，但(dàn)到(dào)了(le)page層，代碼可(kě)能(néng)由多(duō)人(rén)開(kā₽i)發，如(rú)何避免沖突是(shì)個(gè)需要(yào)注意的(de)問(wèn)題。通(tōng)常我們通(tōng)過命名規則來(✘lái)避免這(zhè)種沖突。