文件的組織
創(chuàng)新互聯(lián)建站主營祁連網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā),祁連h5重慶小程序開發(fā)公司搭建,祁連網(wǎng)站營銷推廣歡迎祁連等地區(qū)企業(yè)咨詢
構(gòu)建css系統(tǒng)的第一步是大綱的擬定。(我認(rèn)為)css組織規(guī)劃的重要性堪比網(wǎng)站目錄結(jié)構(gòu)。(htmlor注:用詞夸張一點(diǎn)，讓你加深記憶) 沒有哪種方案放之四海而皆準(zhǔn)，因此我們會討論一些基本的組織方案，以及它們各自的利弊。
主css文件
通?？梢允褂靡粋€主css文件，來放置所有頁面共享的規(guī)則。這個文件會包含默認(rèn)的字體、鏈接、頁眉和其他等樣式。有了主css文件之后，我們開始探討高級組織策略。
方法一:基于原型
最基本的策略是基于原型頁面(archetype page)分離css文件。假如一個網(wǎng)站的首頁、子頁面和組合頁設(shè)計不同，就可以采用基于原型的策略。(這種策略下)每個頁面都會有專屬的css文件。
在原型數(shù)量不多的情況下，這個方法簡單明了、行之有效。然而，當(dāng)頁面元素并不按部就班的位于各個原型頁時，問題就出現(xiàn)了。如果子頁面和組合頁共享某些元素，而首頁卻沒有，我們應(yīng)該怎么做呢?
把共享元素放入主css文件。這雖不是最純正的解決辦法，卻適用于某些具體情況?？墒侨绻W(wǎng)站龐大，(這樣做的話)主css文件會迅速膨脹——這就違背了分離文件的初衷:避免導(dǎo)入不必要的大文件。
在組合頁和子頁面的css文件里各放一份樣式代碼。(這么做)就意味著要維護(hù)冗余代碼，很顯然我們不想這樣。
創(chuàng)建一個新的文件，由這兩種頁面共享。這聽起來不錯。不過假如只有10行代碼，我們創(chuàng)建這個
文件僅僅是為了共享這10行代碼?(htmlor注:殺雞用牛刀?)
這方法很純粹，但如果網(wǎng)站龐大有很多對頁面共享很少量元素時(htmlor注:比如30對頁面分別共享10行代碼)，就顯得很笨重了。
創(chuàng)建一個單獨(dú)的css文件，包含所有共享元素的樣式。這方法可能比較簡單，卻要取決于網(wǎng)站的大小和共享元素的多少。有種情況會很煩:導(dǎo)入了一個很大的css文件，但頁面只用到一小部分樣式——還是那句話，這違背了分離文件的初衷。
這就是我所說的重疊的兩難(overlap dilemma)。零碎css規(guī)則的重疊不一而足，并沒有一個完全清晰無誤的方案來組織它們。
方法二:基于頁面元素/塊
如果網(wǎng)站使用服務(wù)器端include，這個方法會很不錯。舉例說明，如果使用頁眉include，它會有自己相應(yīng)的css文件。頁腳或者其他部分的include可以如法炮制，只須導(dǎo)入自己的css文件。這個方法簡單干凈，不過可能會產(chǎn)生很多小css文件。
舉例來說，假如頁腳的樣式只需要20行css代碼，單獨(dú)創(chuàng)建一個文件就劃不來了。而且這個方法會導(dǎo)致每個頁面都包含一堆css文件——因?yàn)橛卸嗌賗nclude，就得有多少css文件。
方法三:基于標(biāo)記
這個方案直觀實(shí)際，與前一個類似。如果網(wǎng)站共有30個頁面，其中10個含有form，那么可以創(chuàng)建一個css文件專門處理form的樣式，只在這10個頁面導(dǎo)入它。如果另外10個頁面含有table，就創(chuàng)建一個文件專門處理table樣式……諸如此類。
另外的組織技巧
除了用主觀的方法組織文件，我們還要考慮如打印、手持設(shè)備和屏幕等多種媒體類型。這雖然已經(jīng)很清楚的定義過，可依舊是建立文件結(jié)構(gòu)時應(yīng)該考慮的一個因素。一旦必須支持多種媒體類型，主css文件里的某些規(guī)則可能就得重新考慮。
另外，品牌聯(lián)合也可能是一個重要因素。(htmlor注:如google和nike聯(lián)手推出的joga) 如果涉及品牌聯(lián)合，你就得考慮哪些元素應(yīng)該調(diào)整以適應(yīng)另一品牌。比如分別使用不同的css文件等。
還有一個常被忽略的技巧:使用嵌套的@import語句。只包含一連串@import語句，
或者再加幾句css規(guī)則，就能創(chuàng)建一個css文件。用這個方法完全可以創(chuàng)建網(wǎng)站的主css文件(用@import導(dǎo)入各部分的樣式文件)。假如網(wǎng)站的每個
頁面都導(dǎo)入了4到5個不同的css文件，無疑你應(yīng)該考慮使用這個技巧。
規(guī)則和選擇器的組織
談完了文件組織，接著討論一下怎么組織文件里的東西吧。很自然，我們希望在文件里暢通無阻的瀏覽，迅速找到要編輯的選擇器(selector)或規(guī)則。
冗余 vs. 附屬
正如Dave Shea在其文章《冗余 vs. 附屬》(Redundancy vs.
Dependency)里所說的，你必須不斷了解級聯(lián)(cascade)。你要決定是對選擇器編組(意味著附屬)，還是把它們分離(意味著冗余)。編組可
以保持代碼簡潔扼要，可是會建立附屬關(guān)系，導(dǎo)致維護(hù)開銷增加。如果不編組，就會增加文件大小，讓相似的選擇器保持一致變得困難。只有做好這種權(quán)衡、取舍，
才能每次都作出正確的決定。
按相互關(guān)系/上下文編組
既然文件組織可以是主觀的，那么顯然，按照規(guī)則和選擇器與其他部分的相互關(guān)系來進(jìn)行編組是最好的方法。舉例說明，假設(shè)你用容器、頁眉和頁腳來完成布局，就應(yīng)該把它們編成一組。
這似乎很簡單，其實(shí)不然。比如，把頁眉中的導(dǎo)航加入css時，是將它跟父元素編組還是獨(dú)立編組?這種情況下，要視乎規(guī)則的上下文。通常，頁眉與頁面布局相關(guān)，應(yīng)該與其他布局元素一起編組。而導(dǎo)航是頁眉的一塊，應(yīng)該和頁眉的其他塊編組，而不是頁眉本身。
使用注釋
跟大多數(shù)代碼類似，注釋是組織良好與否的關(guān)鍵。應(yīng)該根據(jù)css的控制范圍，清楚的標(biāo)注每節(jié)(section)。最好確保注釋視覺突出，以便在內(nèi)容滾動、一目十行時快速定位。
Doug Bowman在其文章《css組織技巧之一:標(biāo)記》(CSS Organization Tip #1: Flags)里把css注釋玩得高明之極。他詳細(xì)說明了在節(jié)名之前加上等號，以便使用文本編輯器的查找功能迅速跳到某節(jié)。
別忘了
你應(yīng)該細(xì)致認(rèn)真的了解了特異性、級聯(lián)和繼承，并善用它們。它們之中的每一項(xiàng)都可以是你最可怕
的敵人，也可以是你最友善的朋友。當(dāng)建立龐大的網(wǎng)站時，是否理解這些細(xì)微精妙之處，決定了你所構(gòu)建的是堅如磐石的系統(tǒng)，還是經(jīng)不起風(fēng)雨的豆腐渣工
程。(htmlor注:這句完全意譯，比較爽)
屬性的組織
現(xiàn)在我們了解了文件的組織，也知道了文件內(nèi)規(guī)則的組織，但還有一個重要的組織環(huán)節(jié)(沒有提到)，那就是屬性(attribute)。雖然屬性比前兩個概念更簡單，可是還有一些非常好的、能夠保持規(guī)則整潔的方法很值得一提。
按字母排序
提到屬性，如果說需要遵循什么原則的話，那就是:按-字-母-排-序。其實(shí)這招對于屬性瀏覽幫助不大，不過可以防止屬性值覆蓋這種偶然事件的發(fā)生。
舉個例子吧，已經(jīng)數(shù)不清有多少次，我為某個選擇器定義過了margin值，之后的某天無意間
又加了一個(或前或后)。(這種情況下)后一個屬性自然會起作用。假設(shè)不知道第二個屬性存在，不管我怎么調(diào)整第一個屬性值、刷新瀏覽器，也看不到頁面變
化。(htmlor注:這個問題我深有體會) 如果按照字母順序排列，你就會發(fā)現(xiàn)margin被定義了兩次(因?yàn)樗鼈儼ぴ谝黄?，這個問題自然可以避免。
優(yōu)先項(xiàng)
當(dāng)網(wǎng)站復(fù)雜、牽涉太多css文件時，會建立大量的附屬關(guān)系。一旦需要定制某個元素特有的樣式，!important選項(xiàng)似乎是最佳選擇。沒錯，!important是能解一時之需，但最好搞清楚導(dǎo)致問題的根源，然后根據(jù)級聯(lián)關(guān)系決定是否真的需要用它。
如果你對上文提到的特異性、級聯(lián)和繼承很熟悉，大可不必抱著!important一顆樹不 放。(htmlor注:整片森林等著你~)
當(dāng)然它還是會派上用場，不過使用之前要對具體情況了然于胸。千萬不要因?yàn)椴恢獑栴}的癥結(jié)所在而把!important當(dāng)作捷徑或是補(bǔ)救方案。
小結(jié)
當(dāng)我們變得依賴css而使樣式表日漸復(fù)雜時，就需要正確的計劃來避免犯錯，并使代碼易于維護(hù)。既然完美無缺的方案并不存在，那么了解css的工作方式以及文件、選擇器和屬性的多種組織方案，無疑有助于我們寫出優(yōu)質(zhì)的代碼，經(jīng)受住時間考驗(yàn)。
網(wǎng)站運(yùn)營
[img]1、一個網(wǎng)站頁面或多或少，但很多頁面樣式基本一致，這時我們需要把css代碼寫在一個文件里，可以省去不少的代碼，也縮小的css文件的內(nèi)存大小。保證了網(wǎng)站的打開速度。
2、寫在HTML里是最簡單的一種方式，但是只適合少量內(nèi)容的頁面，減少了整個網(wǎng)站的復(fù)雜性，也保證了頁面的穩(wěn)定性。
首先關(guān)于CSS文件，我一般只使用一個文件，這無關(guān)于網(wǎng)站的大小，網(wǎng)站越大，某種意義上我這種做法的優(yōu)勢與潛力就會體現(xiàn)的越明顯。我這種單CSS文件的做法適合于web2.0的網(wǎng)站
讓網(wǎng)站單CSS誰都會，關(guān)鍵是為何可以使用單CSS文件，這個CSS文件不會很大嗎，如果一個網(wǎng)站有400個頁面，那么這個CSS文件豈不要數(shù)百K。非也，在網(wǎng)站頁面風(fēng)格一致，在web系統(tǒng)結(jié)構(gòu)良好的情況下，CSS文件可以控制的非常小，而且高性能，同時頁面擴(kuò)展性也非常好。下面就開始一點(diǎn)一點(diǎn)的展示，內(nèi)容較多，需要慢慢來~~
1、整體概述
頁面布局與文章內(nèi)容顯示需要，我將整體架構(gòu)做成了一張圖片，見下圖：
2、關(guān)于CSS reset
CSS reset(css重置)基本上是不需要的，至少可以說80%的的CSS reset都是沒有必要的，反而增加了頁面CSS 的overwrite，尤其像開心網(wǎng)*{margin:0;}這樣子業(yè)余的做法更是要不得（反而破壞了很多UI的兼容性，比如說單復(fù)選框等）。我不是一概鄙棄CSS reset，有些常用標(biāo)簽我也是會簡單重置一下的，而且會避免overwrite（樣式重寫），以保證樣式最精簡，渲染最高效。如下代碼示例：
如何搭建系統(tǒng)CSS架構(gòu)
css是英文Cascading Style Sheets的縮寫。 它是一種用來表現(xiàn)HTML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用)或XML(標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集)等文件樣式的計算機(jī)語言。那么如何搭建系統(tǒng)CSS架構(gòu)呢，一起來學(xué)習(xí)學(xué)習(xí)!
搭建CSS法則
在項(xiàng)目開始的時候，我們談?wù)摿碎_發(fā)者關(guān)于他們的流程和痛點(diǎn)，并問他們的接口設(shè)計系統(tǒng)如何讓他們的工作量變簡單。
完成我的前端指導(dǎo)問卷，這些導(dǎo)致一系列前端規(guī)則和系統(tǒng)封裝。這里有些我們創(chuàng)建的CSS具體規(guī)則。
模塊化 —— 設(shè)計系統(tǒng)在每一個方面都是模塊，這是非常實(shí)用寫CSS的方法。這在組件之間需要清晰分隔。
可讀性是關(guān)鍵 ——開發(fā)者必須在第一眼理解CSS代碼，并且理解每一個選擇器的目的。
清晰勝過簡潔 —— 設(shè)計系統(tǒng)有時候看上去很冗長，但是作為交換，它提供清晰和韌性。保持CSS可讀性和可擴(kuò)展性意味著犧牲簡潔的語法。
保持平面化 —— 長的選擇器要回避，無論什么地方，盡可能保持CSS獨(dú)立DOM和模塊化。
避免沖突 —— 因?yàn)榻M件會部署許多不同的應(yīng)用，保證設(shè)計系統(tǒng)之間的CSS不會和其他的庫和系統(tǒng)有沖突，這很重要。通過系統(tǒng)空間命名Class名可以完成這個，更多的會在之后描述。
從這些規(guī)則中，我們搭建了制約和語法，包含了這些規(guī)則，以滿足開發(fā)者的需求。這里有一個我們總結(jié)出的class語法：
全局命名空間
所有的Class都和設(shè)計系統(tǒng)關(guān)聯(lián)的都以全局命名空間為前綴，這就是公司名稱后面加一個連體符
.cn-
如果你工作的CSS框架是用于單個網(wǎng)站或者如果你對你的開發(fā)環(huán)境有絕對控制，那么引入全局命名空間是不需要的。但是如果你的設(shè)計系統(tǒng)是混合的技術(shù)，那么為系統(tǒng)特定代碼創(chuàng)建一個標(biāo)識是很重要的。作為第三方開發(fā)者，在多個環(huán)境中利用他們的系統(tǒng)，營銷團(tuán)隊可能會失控，因此Lightning Design System引用了相似的方法到他們的系統(tǒng)之中(通過前綴.slds-)，在我們的例子中，許多我們客戶的.開發(fā)者使用Angular，因此他們已經(jīng)很熟悉命名空間的概念，因?yàn)锳ngular使用ng-作為命名空間，為Angular特殊的代碼。
Class前綴
除了命名空間，我們添加前綴到每個Class，為了使之更加明顯，這個這個Class是做什么的。下面是我們使用的類前綴：
c- 用于UI組件,比如.cn-c-card 或.cn-c-header
l- 用于布局相關(guān)樣式, 比爾.cn-l-grid__item或.cn-l--two-column
u- 用于公共部分, 比如.cn-u-margin-bottom-double 或.cn-u-margin-bottom-double
is- 和 has- 用于特定狀態(tài), 比如.cn-is-active或 .cn-is-disabled. 適用于這些狀態(tài)為基礎(chǔ)的樣式。
js- 用于目標(biāo)特定功能, 比如.js-modal-trigger. 這些class沒有綁定樣式; 他們只是為了行為而保留的. 對于大多數(shù)案例, 這些 js- 類將在元素上會切換基于狀態(tài)的類。
我被灌輸來自Harry Roberts的一個概念，并且一開始在我認(rèn)為這有道理的同事，我還是持有質(zhì)疑的態(tài)度的，僅僅因?yàn)檫@是額外的字符并且我認(rèn)為前綴會降低代碼可讀性。然而我的想法是不對的。在實(shí)施類前綴之后，我發(fā)現(xiàn)他們對于分清每個類的角色十分有幫助并且對于破譯一個應(yīng)用的代碼庫十分容易一目了然。對于設(shè)計系統(tǒng)用戶，這種清晰的代碼能夠整理清楚頭緒，特別有用。
BEM語法
BEM 代表了“塊元素修飾”，這意味著：
Block 主要組件塊, 比如.cn-c-card或者.cn-c-btn
Element 是主要塊的一個子類,比如.cn-c-card__title
Modifier 是一個組件樣式的各種變化, 比如.cn-c-alert--error
這種方法論已經(jīng)很受歡迎了，將這些概念和全局命名空間和類前綴結(jié)合在一起，允許我們創(chuàng)造更明顯封裝的類名。
把它們都放到一起：解剖一個類
全局命名空間的結(jié)合，類別前綴，和BEM語法引出了一個明確的(是的，冗長的)類字符創(chuàng)，允許開發(fā)者們在構(gòu)造UI的時候演繹他在之間扮演的角色。
讓我們檢查下以下的例子：
.cn-c-btn--secondary
cn- 是來自設(shè)計系統(tǒng)的用于所有樣式的全局命名空間。
c- 是class的類別, 在案例中，c- 一位置“組件”
btn 是塊名(“Block(塊)” 就是BEM中的“B”)
--secondary 是一個修飾成分, 指向一個塊的變化多端的樣式 (“Modifier(修飾)” 就是BEM中的“M”)
這里有另一個例子：
.cn-l-grid__item
cn- 再一次出現(xiàn)就是系統(tǒng)的全局命名空間。
l- 是類的類別, 在這種情況下l- 意味著 “布局”
grid 是塊名
__item 是一個元素, 表明那是塊中的一個分支(“Element”在BEM中指“E”)
還有一個：
.cn-c-primary-nav__submenu
cn- 是系統(tǒng)的全局命名空間。
c- 是類的類別, 在這個例子中c- 意味著 “component”
primary-nav 是塊名
__submenu是一個元素, 指出他是塊的子元素 (“Element” 在BEM中是“E”)
此外，毫無疑問，這些類比大多數(shù)其他方法的類更加冗長，但是對于這種特殊的系統(tǒng)，這些約定很有意義。
其他技巧
明確細(xì)節(jié)
為了防止代碼瓦解，我們詳細(xì)說明如何處理這么多細(xì)小的細(xì)節(jié)，就像注釋、代碼塊之間的空間距，tab還是space等等。感謝上天，Harry Roberts已經(jīng)將一個極佳的綜合的資源整合在了一起，稱之為CSS Guidelines，對于這些類型的約定，這個作為我們的底線。我們梳理所有的代碼并且標(biāo)記出我們偏離Harry指出地方的計劃。
Sass父選擇器
我一直有個關(guān)于CSS的一個問題，是找出究竟在哪里放一個規(guī)定的規(guī)則。如果我有一個主要的導(dǎo)航組件，我要把這些樣式放在頭部還是在部分的主要導(dǎo)航Sass?謝天謝地，Sass父元素原則器出現(xiàn)了，這允許我們把所有的組件特定的樣式放在一個根元素下：
.cn-c-primary-nav {
/**
* Nav appearing in header
* 1) Right-align navigation when it appears in the header
*/
.cn-c-header {
margin-left: auto; /* 1 */
}}
這意味著，所有的主要導(dǎo)航樣式都可以在一個主導(dǎo)航Sass部分中找到，而不是將他們分成好幾個文件。
Sass嵌套的明確規(guī)則
在Sass中嵌套可能十分方便，但是增加了糟糕輸出的危險，會有過長的選擇器字符創(chuàng)。我們遵循《盜夢空間》規(guī)則，嵌套永遠(yuǎn)不超過3層。
牢記設(shè)計系統(tǒng)的CSS平坦規(guī)則，我們希望在下列情況中限制嵌套：
一個樣式塊修飾
媒體查詢
父元素選擇器
狀態(tài)
樣式塊裝飾 對于裝飾來說，如果規(guī)則只有幾行長度，裝飾塊可以被嵌套在父元素中，就像下面這樣：
.cn-c-alert {
border: 1px solid gray;
color: gray;
/**
* 錯誤彈出
*/
--error {
border-color: red;
color: red;
}}
由于符號，這會編譯成：
.cn-c-alert {
border: 1px solid gray;
color: gray;}.cn-c-alert--error {
border-color: red;
color: red;}
對于長樣式塊，我們不會嵌套裝飾代碼，因?yàn)檫@減少了代碼的可讀性。
媒體查詢器
組件特定媒體查詢器能夠在組件塊中嵌套。
.cn-c-primary-nav {
/* Base styles */
/**
* 1) On larger displays, convert to a horizontal list
*/
@media all and (min-width: 40em) {
display: flex;
}}
這個會被編譯成：
.cn-c-primary-nav {
/* Base styles */}@media all and (min-width: 40em) {
.cn-c-primary-nav {
display: flex;
}}
父元素選擇器
設(shè)計系統(tǒng)會充分使用Sass的父元素選擇器原理。這里允許所有的給定組件的規(guī)則在一個地方維護(hù)。
.cn-c-primary-nav {
/**
* Nav appearing in header
* 1) Right-align navigation when it appears in the header
*/
.cn-c-header {
margin-left: auto; /* 1 */
}}
這會被編譯成：
.cn-c-header .cn-c-primary-nav {
display: flex;}
cn-c-primary-nav所有樣式都會在一個地方找到，而不是分散在許多部分文件之中。
狀態(tài)
組件的狀態(tài)必須包括在一個嵌套的元素之中。這包括了hover, focus,和active狀態(tài)：
.cn-c-btn {
background: blue;
:hover, :focus {
background: red;
}}
這需要編譯為：
.cn-c-btn {
background: blue;}.cn-c-btn:hover, .cn-c-btn:focus {
background: red;}
狀態(tài)同樣可以選用通用類的形式，比如is-和 has-:
.cn-c-accordion__panel {
overflow: hidden;
max-height: 0;
.cn-is-active {
max-height: 40em;
}}
者會被編譯成：
.cn-c-accordion__panel {
overflow: hidden;
max-height: 0;}.cn-c-accordion__panel.cn-is-active {
max-height: 40em;}
為了創(chuàng)建一個堅固的系統(tǒng)，將這些規(guī)則都放入一個地方中，給我們需要堅持的一些制約和規(guī)定。當(dāng)我們遇到一些規(guī)定不是很明顯或者有多重解決方案的情況下，我們需要一次談話，討論如何處理這些問題，如果需要的話可以更新方針。
;
css架構(gòu)是我們在進(jìn)行網(wǎng)頁開發(fā)的時候需要使用的重要編程代碼之一，而今天我們就一起來了解一下，一個好的css架構(gòu)都應(yīng)該具有哪些特點(diǎn)，下面就開始今天的主要內(nèi)容吧。
我認(rèn)為好的CSS架構(gòu)的目標(biāo)應(yīng)該與所有好的軟件開發(fā)的目標(biāo)沒有太大的區(qū)別。我希望我的CSS是可預(yù)測的、可重用的、可維護(hù)的和可擴(kuò)展的。
可被預(yù)測
可預(yù)測的CSS意思是您的規(guī)則能按照您預(yù)想的方式運(yùn)行。當(dāng)您添加或更新一個規(guī)則時，它不應(yīng)該影響您的站點(diǎn)中您不想影響的部分。在很少改變的小站點(diǎn)上，這并不重要，但在有數(shù)十或數(shù)百個頁面的大站點(diǎn)上，可預(yù)測的CSS是必須的。
可復(fù)用
CSS規(guī)則應(yīng)該足夠抽象和可被解耦的，您不必對已經(jīng)解決的模式和問題進(jìn)行重新編碼，可以依靠現(xiàn)有的部分快速構(gòu)建新的組件。
可維護(hù)
當(dāng)您的站點(diǎn)需要添加、更新或重新安排新的組件和特性時，這樣做不需要重構(gòu)現(xiàn)有的CSS。向頁面中添加某組件甲不應(yīng)該破壞某組件乙。
可擴(kuò)展
隨著站點(diǎn)的規(guī)模和復(fù)雜性的增長，通常需要更多的開發(fā)人員來維護(hù)?？蓴U(kuò)展的CSS意味著它可以由一個人或一個大型工程團(tuán)隊輕松管理。這也意味著您的站點(diǎn)的CSS架構(gòu)不需要大量的學(xué)習(xí)曲線就可以輕松學(xué)習(xí)掌握。不能因?yàn)槟悄壳熬S護(hù)CSS的開發(fā)人員，就不考慮以后的變化。
常見的糟糕實(shí)踐
在我們尋找如何實(shí)現(xiàn)好的CSS體系結(jié)構(gòu)目標(biāo)的方法之前，我認(rèn)為看看妨礙我們實(shí)現(xiàn)目標(biāo)的常見實(shí)踐是有幫助的。只有通過了解那些不斷重復(fù)的錯誤，我們才能開始接受另一種路徑。
雖然在技術(shù)上是有效的，但它們的結(jié)果都導(dǎo)致了災(zāi)難和頭痛。盡管我的本意是好的，而且希望每次的開發(fā)會有所不同，但這些模式持續(xù)讓我陷入困境。
根據(jù)組件的父類修改組件
幾乎在Web上的每個站點(diǎn)中都有一個特定的視覺元素，它與每個事件看起來完全相同，只有一個例外。大理北大青鳥認(rèn)為當(dāng)遇到這種一次性的情況時，幾乎每一個新的CSS開發(fā)人員(甚至是經(jīng)驗(yàn)豐富的開發(fā)人員)都以同樣的方式處理它。您要為這個特定的事件找出某個的父元素(或者創(chuàng)建一個)，然后編寫一個新規(guī)則來處理它。
關(guān)于如何處理網(wǎng)站的CSS，各個網(wǎng)站做法都不一樣，這隨著網(wǎng)站的性質(zhì)及大小不同，公司前人留下的規(guī)范不同，以及CSS工程師的眼界不同而有所不同。由于我從業(yè)經(jīng)歷有限，所知甚淺，只能說些膚淺業(yè)余的內(nèi)容，不準(zhǔn)確之處歡迎指出。
就CSS文件而言，有的網(wǎng)站分為header.css, body.css, footer.css，不做評價；
有的分為reset.css, main.css, content.css，不做評價；
有的分為common.css,然后每個種類的頁面一個CSS，例如home.css(主頁), album.css(相冊頁面),message.css(站內(nèi)信頁面),blog.css(日志頁面)等，不做評價；
有的分為base.css，然后每個活動頁面一個單獨(dú)的CSS，等，不做評價；
還有的直接將CSS嵌在頁面中，而非外部鏈接調(diào)用，不做評價。
這些不同的處理方法，沒有什么正確與錯誤之分，只有適合不適合。每種方法都有其存在的道理，所以我是沒有資格做任何評價的。
就每個CSS文件的內(nèi)容而言，一般都會有一段長長的CSS reset（樣式重置），然后就是有著統(tǒng)一前綴，命名較長的樣式內(nèi)容，就像人人網(wǎng)的部分樣式截圖：
使用長命名，統(tǒng)一的父級命名避免樣式?jīng)_突時無可厚非的。確實(shí)！曾經(jīng)我也如此。
三、我是如何對網(wǎng)站CSS進(jìn)行架構(gòu)的
首先關(guān)于CSS文件，我一般只使用一個文件，這無關(guān)于網(wǎng)站的大小，網(wǎng)站越大，某種意義上我這種做法的優(yōu)勢與潛力就會體現(xiàn)的越明顯。我這種單CSS文件的做法適合于web2.0的網(wǎng)站，例如像是SNS網(wǎng)站（開心、人人、白社會），嘀咕網(wǎng)，蝦米網(wǎng)，凡客這類網(wǎng)站，如果是門戶網(wǎng)站，sorry，鐵定不適合。
讓網(wǎng)站單CSS誰都會，關(guān)鍵是為何可以使用單CSS文件，這個CSS文件不會很大嗎，如果一個網(wǎng)站有400個頁面，那么這個CSS文件豈不要數(shù)百K。非也，在網(wǎng)站頁面風(fēng)格一致，在web系統(tǒng)結(jié)構(gòu)良好的情況下，CSS文件可以控制的非常小，而且高性能，同時頁面擴(kuò)展性也非常好。下面就開始一點(diǎn)一點(diǎn)的展示，內(nèi)容較多，需要慢慢來~~
1、整體概述
頁面布局與文章內(nèi)容顯示需要，我將整體架構(gòu)做成了一張圖片，見下圖：
2、關(guān)于CSS reset
CSS reset(css重置)基本上是不需要的，至少可以說80%的的CSS reset都是沒有必要的，反而增加了頁面CSS 的overwrite，尤其像開心網(wǎng)*{margin:0;}這樣子業(yè)余的做法更是要不得（反而破壞了很多UI的兼容性，比如說單復(fù)選框等）。我不是一概鄙棄CSS reset，有些常用標(biāo)簽我也是會簡單重置一下的，而且會避免overwrite（樣式重寫），以保證樣式最精簡，渲染最高效。如下代碼示例：
body{
line-height:1.4;
color:#333;
font-family:arial;
font-size: 12px;background:white;}
input,textarea,select{font-size:12px;font-size:100%;font-family:arial;font-family:inherit;
}
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form{
margin:0;
}
h4,h5,h6{
font-size:1em;
}
ul,ol{
padding-left:0;
list-style-type:none;
}
/*image with no-border*/a img{border:0;}img{border:0;}
這就是我全部的CSS reset。就這些就足夠了，我是沒有遇到什么兼容性的問題，不要盲從于一些主流的做法，就這些，足夠了。
3、關(guān)于CSS通用樣式庫
完整的通用樣式庫如下（您可以根據(jù)自己的喜好重命名或是添加刪除部分樣式）：
.l{float:left;}.r{float:right;}.cl{clear:both;}
.n{font-weight:normal; font-style:normal;}.b{font-weight:bold;}.i{font-style:italic;}
.fa{font-family:Arial;}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.fs{font-family:'宋體';}.fw{font-family:'微軟雅黑';}
.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}
.tdl{text-decoration:underline;}.tdn,.tdn:hover,a.tdl:hover{text-decoration:none;}
.g0{color:#000000;}.g3{color:#333333;}.g6{color:#666666;}.g9{color:#999999;}.red{color:red;}.wh{color:white;}
.f0{font-size:0;}.f10{font-size:10px;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.f24{font-size:24px;}
.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-2px;}.vimg{margin-bottom:-3px;}
.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr1{margin-right:1;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt1{margin-top:1;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.ml-1{margin-left:-1px;}.mt-1{margin-top:-1px;}
.p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}
.rel{position:relative;}.abs{position:absolute;}
.dn{display:none;}.db{display:block;}.dib{-moz-inline-stack:inline-block; display:inline-block;}.di{display:inline;}
.ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;}
.lh14{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}.lh22{line-height:22px;}.lh24{line-height:24px;}
.fix{*zoom:1;}.fix:after,.fix:before{display:block; content:"clear"; height:0; clear:both; overflow:hidden; visibility:hidden;}.z{_zoom:1;}
上面的樣式是有簡單的分類的，某種意義上講，CSS庫與js庫屬于類似的東西。
關(guān)于此樣式庫，您可以直接在您的頁面頭部head標(biāo)簽內(nèi)嵌入如下代碼：
link rel="stylesheet" href="" type="text/css" /
如果您想下載此CSS文件，您可以狠狠地點(diǎn)擊這里：(右鍵-[目標(biāo)|鏈接另存為])。您可以隨意修改，如果能保留我的一個個人信息，那真是感激不盡~~
4、網(wǎng)站CSS樣式庫
這里的樣式是根據(jù)當(dāng)前實(shí)際的項(xiàng)目內(nèi)容指定的。例如，文字鏈接顏色是什么，文字鏈接經(jīng)過的樣式是什么；一些常用的背景色樣式，常用的邊框樣式等，以及一些高寬等。按照我的經(jīng)驗(yàn)，網(wǎng)站CSS樣式庫又可以架構(gòu)為以下幾部分：
①網(wǎng)站常見顏色，尤其是鏈接色
②網(wǎng)站常見背景色（我習(xí)慣用bg+顏色前2字母表示，例如.bgf7表示background:#f7f7f7;）
③網(wǎng)站常見邊框色，這里類似于CSS 通用庫中的margin屬性，需拆分，例如.bbdd表示border-bottom:1px solid #ddd;每人的命名習(xí)慣不一樣，但是盡量簡單為好，甚至您可以像Google一樣，直接兩個字母（大小寫混搭）表示。另外，一定要告知設(shè)計師，邊框取色不宜多，不能憑感覺，要有所犧牲，也就是如果之前使用了#cecece的邊框色，后面的即使使用#d0d0d0更好看，請使用#cecece代替，這就是團(tuán)隊協(xié)作。
④網(wǎng)站遺留的單margin屬性，例如，某一div留白較大，有個單獨(dú)的margin-top:35px的屬性，ok，這個屬性請放在網(wǎng)站CSS樣式庫中，以.mt35{margin-top:35px;}保留，以供之后類似布局或需要的地方使用。
⑤網(wǎng)站遺留的單padding屬性，例如，雙欄自適應(yīng)布局時，無論是浮動自適應(yīng)，還是絕對定位自適應(yīng)，都需要使用padding-left值，此時的padding-left多單樣式，可抽取出來，以網(wǎng)站樣式庫的形式存在。記住，是單屬性，且不可從通用元素中抽取單獨(dú)的padding值，否則是給自己挖火坑。
⑥網(wǎng)站遺留的width屬性，在流體布局思想下，寬度是有限的，是珍貴的，需好好利用。
⑦網(wǎng)站常用的一些height屬性，指一些高度值，例如height:18px; height:20px; height:24px; height:50px; height:100px; height:200px;等。
記住一個原則：網(wǎng)站通用的元素（按鈕，導(dǎo)航，選項(xiàng)卡的）的樣式千萬不能分離作為網(wǎng)站的CSS樣式庫。
5、網(wǎng)站通用小圖標(biāo)樣式集
小圖標(biāo)的樣式合并是普遍處理的較好的，由于其規(guī)律可循，所以經(jīng)常在CSS文件較上的位置看到有關(guān)小圖標(biāo)的CSS合并樣式，這在SNS網(wǎng)站中很是常見。一般合并樣式部分樣式為{background:url(xx.png) no-repeat;}，分離部分的樣式是{background-position:x, y;}，就實(shí)現(xiàn)而言，我覺得沒有多少說頭，只是命名有些自己的見解。在小圖標(biāo)樣式命名的時候，我的建議是不要關(guān)聯(lián)圖片的內(nèi)容，比如說一個相冊的下圖標(biāo)，不應(yīng)該使用iAlbum這樣的命名。原因有三：
1. 思考圖片的命名殺死n多腦細(xì)胞
2. 命名較長，占用字節(jié)數(shù)，也就是CSS文件大小
3. 也是最重要的，后期的維護(hù)。設(shè)想下，如果日后相冊的圖標(biāo)不再被使用了，原來相冊圖標(biāo)的位置可以被其他小圖標(biāo)（如RSS小圖標(biāo)）替換嗎？理論上可以，實(shí)際上，我們除了必要的html替換，還需要重新修改圖標(biāo)樣式的命名，即iAlbum→iRss的命名，而往往取而代之的做法是直接在后面添加新的圖標(biāo)。
我目前的做法是使用一個不常用的標(biāo)簽作為網(wǎng)站的小圖標(biāo)專用標(biāo)簽，例如s標(biāo)簽，或是u標(biāo)簽，我習(xí)慣將小圖標(biāo)單獨(dú)為一個小圖標(biāo)Sprite，每個圖標(biāo)放在20*20像素的格子中。在這種情況下，我都是使用矩陣命名法。命名只關(guān)聯(lián)位置，例如，我使用u標(biāo)簽作為整個網(wǎng)站的小圖標(biāo)專用標(biāo)簽，則按照圖標(biāo)的位置（假設(shè)一行20個圖標(biāo)），我會依次命名為：u00,u01,u02…u019,u10,u11,…u119…。這種命名的好處是不用關(guān)心到底哪個位置是那個圖標(biāo)，不用擔(dān)心命名沖突，在小圖標(biāo)位置以及內(nèi)容更換的情況下也無需重命名。
例如，上圖中標(biāo)注的u113的意思其實(shí)是u(1,13)，這種小圖標(biāo)命名的方法我稱之為“小圖標(biāo)矩陣命名法”。此命名略有不足在于在使用小圖標(biāo)時需要打開源文件或通過注釋準(zhǔn)確查詢到對應(yīng)的class。
6-10、網(wǎng)站通用樣式
這里的“網(wǎng)站通用樣式”可以說與“網(wǎng)站通用樣式庫”最為對立的兩部分。網(wǎng)站通用樣式專指“獨(dú)立元素”的通用樣式，所謂“獨(dú)立元素”指的是網(wǎng)站通用的導(dǎo)航，菜單，按鈕，選項(xiàng)卡，文本框裝飾，圖片裝飾，圓角處理等等。這些“獨(dú)立元素”的樣式千萬不能對其進(jìn)行分離并歸入“網(wǎng)站通用樣式庫”中，否則，日后會給你留下無盡的痛苦的！
我?guī)缀鯊牟粚Π粹o或是導(dǎo)航進(jìn)行定寬，都是寬度自適應(yīng)，這樣，可以大大節(jié)約Sprite背景圖片以及CSS代碼的成本。以前多有探討，這里不多說了。
網(wǎng)站通用樣式的代碼量在整個CSS文件中所占據(jù)的比重是相當(dāng)大的，如果您的CSS文件中發(fā)現(xiàn)CSS通用樣式只占整個CSS文件的一小部分，尤其網(wǎng)站項(xiàng)目較大時，那就需要引起警惕，可能最后的結(jié)果就是CSS文件超負(fù)荷，最后反而一團(tuán)糟。
11、網(wǎng)站公共結(jié)構(gòu)樣式
所謂“網(wǎng)站的結(jié)構(gòu)樣式”主要指的是最外框div的樣式，一般限制網(wǎng)站的寬度(960~990不等)，還有就是網(wǎng)站的分欄布局樣式，這里的樣式僅僅針對主體結(jié)構(gòu)，例如left_part，或是right_part；還包括網(wǎng)站的頭部的一些公用結(jié)構(gòu)，底部的樣式結(jié)構(gòu)等。
我是強(qiáng)烈建議公共結(jié)構(gòu)僅僅定寬定高，設(shè)置浮動屬性，切不可在結(jié)構(gòu)樣式上添加margin或是padding屬性，這會使網(wǎng)站的公共結(jié)構(gòu)的重用性大大降低！
12、單頁面的精細(xì)結(jié)構(gòu)
如果上述11項(xiàng)您都架構(gòu)的非常好，那么您在編寫每個具體頁面的時候，就會非常輕松，非常迅速。因?yàn)?0%~90%的樣式都可以從上面11項(xiàng)中直接拿來用（上述11項(xiàng)全部都是網(wǎng)站公用樣式）。
對于中型大型網(wǎng)站，我們可能要花3~4天甚至更多的時間分析頁面設(shè)計圖，處理CSS Sprite，架構(gòu)網(wǎng)站的CSS，這段時間不寫任何頁面，就是處理網(wǎng)站（可以說是）唯一的CSS文件。所謂“磨刀不誤砍柴功”，站在整站的角度上去思考CSS是非常重要的，這可以讓你避免迷路，有助于寫出精簡高效的樣式代碼。
當(dāng)我們把1-11項(xiàng)都完成了，就開始著手寫頁面了，這時候，整個網(wǎng)站的頁面基本上都在你腦中了，您在下手的時候就會清除：我現(xiàn)在做的是哪個頁面，在整個網(wǎng)站中扮演著什么樣的地位，這個頁面的CSS對整個網(wǎng)站的CSS有什么影響，這里的樣式該怎么處理（分離，合并還是獨(dú)立）等。
一般而言，就我個人經(jīng)驗(yàn)，每個頁面，即使這個頁面看上去很復(fù)雜，其代碼開銷也是非常小的。其新增的代碼開銷去處有三處：一是分離一些樣式歸入“網(wǎng)站CSS樣式庫”中；二是凡事使用的CSS Sprite的樣式與其他樣式進(jìn)行合并；三就是一些精細(xì)的復(fù)雜的樣式，這些就是CSS文件的架構(gòu)的最后一部分“單頁面的精細(xì)結(jié)構(gòu)了”，何為單頁面的精細(xì)結(jié)構(gòu)，如下圖的樣式，就可以說是精細(xì)結(jié)構(gòu)，需要獨(dú)立出來新寫樣式（可適當(dāng)分離，注意“適當(dāng)”一詞）：
例如上圖鼠標(biāo)經(jīng)過后顯示，紅色虛框樣式，剪刀，粗邊框投影，最優(yōu)惠標(biāo)示，一些按鈕等就屬于精細(xì)結(jié)構(gòu)，我們需要在頁面上單獨(dú)寫一個樣式。雖然理論上，我們使用分離也是可以實(shí)現(xiàn)這個效果的，但是此時html代碼的開銷實(shí)在太大，根本就不適合使用分離，這里就該老老實(shí)實(shí)的寫樣式。這里的寫法，命名都應(yīng)該跟隨內(nèi)容而不是屬性本身。我們可以在單一類別的頁面使用同樣的前端的前綴避免樣式?jīng)_突等~~
四、關(guān)于適用性
有些東西雖然看上去好，但是卻不適用。通過上述的CSS架構(gòu)，我可以把網(wǎng)站的樣式控制地非常的精簡與高效（當(dāng)然，需要設(shè)計師與后臺工程師的通力配合），但是，對于別人，套用此架構(gòu)可能就沒有這樣的效果，可能反而會更糟。前面也提到了，這種架構(gòu)是我自己摸索出來的，是根據(jù)自己的寫法，布局思想，甚至性格等形成的，帶有明顯的個人印記。
比方說，我是個推崇自適應(yīng)布局（流體布局）的人，是個十足的自適應(yīng)控，但是，有很大一部分同行是固定布局（像素級兼容，有計算）。固定布局固然有其優(yōu)點(diǎn)，但是其CSS代碼的消耗量以及頁面的擴(kuò)展性我是很詬病的，顯然，這是無法應(yīng)用到我這里的架構(gòu)中的。
其次，不少CSS剛?cè)腴T的頁面開發(fā)工程師對CSS屬性理解不夠透徹，常會寫一些沒有必要的冗余代碼。對于他們而言，但CSS文件的架構(gòu)確實(shí)很吃力。
說實(shí)話，我對自己的這個CSS架構(gòu)的適應(yīng)性都不看好，一是自己在表達(dá)方面的火候欠缺，沒有很好的展示架構(gòu)的精髓，二是因?yàn)榇思軜?gòu)本身需要有很多的控制，這種控制受制于設(shè)計師，網(wǎng)站頁面架構(gòu)，CSS工程師自身的功力，一旦樣式泛濫，這種架構(gòu)也就毫無意義，反而弄巧成拙；但是，一旦控制下來，那么網(wǎng)站就CSS性能這塊保證領(lǐng)先，而這些需要優(yōu)秀的有眼界的CSS工程師來掌控，需要優(yōu)秀的設(shè)計師，程序員通力協(xié)作。雖然全然套用我展示的這套架構(gòu)會由于不熟悉或是掌控不夠而產(chǎn)生問題，但是，里面一些概念，一些思想應(yīng)該能有一定的啟示作用的，這也是本文的意義所在了。
我只是個初出茅廬的小生，我知道，很多真正功力深厚的前端開發(fā)人員有著更好的更廣泛適應(yīng)的前端架構(gòu)，如果您有幸來到這里，歡迎分享您的一些見解與認(rèn)識。還有，文中若有您覺得不合理的觀點(diǎn)，也非常歡迎通過評論或是郵件18612269127@163.com)的方式進(jìn)行指正。我們需要在不斷的交流中提高的。
重慶分公司
重慶分公司
