摘要：除了其本身的語法規(guī)則，我們必須自我約束，引入語義規(guī)則，不僅僅是為了提高可讀性這樣的理由，而是拉近人與機(jī)器的距離，讓我們在思維上更加和代碼契合，這樣才能寫出優(yōu)秀的程序。

前一陣子在項(xiàng)目組中講了一個關(guān)于CSS的Session，在講之前我曾收到了許多意見，大部分是希望能講講CSS實(shí)用性的技術(shù)，比如盒模型，CSS3之類的。干貨人人都喜歡，因?yàn)榭吹靡娒弥脕砭陀杏茫易詈筮€是決定講一些”濕貨“。因?yàn)樵贑ode Diff的時候我發(fā)現(xiàn)了許多樣式的問題不是由于不會寫CSS導(dǎo)致的，而是由于在錯誤的地方使用了寫在錯誤地方的樣式。

其實(shí)CSS很簡單，沒有計(jì)算沒有流程，只是一直描述，無論什么復(fù)雜的效果，你只要Google一下就知道怎么寫了，甚至可以直接copy。但CSS又很復(fù)雜，一個元素的表現(xiàn)會受到它旁邊的兄弟元素，也會受到內(nèi)部的子元素影響，還會受到父元素影響，在這種多重影響下，一個元素的顯示邏輯會變得錯綜復(fù)雜。有沒有面對塌陷的塊級元素而束手無策？無論怎么改它的屬性就是得不到自己想要的，但看看似乎一模一樣的示例程序卻安然無恙，是不是恨得咬牙切齒？我想這就是本文所要解決的主要問題，讓你學(xué)會如何優(yōu)雅的寫CSS。

其實(shí)我們只要稍微接觸過CSS，一定都學(xué)過盒模型，我假設(shè)你已經(jīng)對margin、padding和border已經(jīng)很熟悉。好了，我們經(jīng)常會遇到一種情況，想讓父元素和子元素之間有一些空間，比如布局的時候，container和content之間的留白。一般來說有兩種方式，一種是給父元素加padding內(nèi)邊距，另一種是給子元素加margin外邊距。現(xiàn)在想想，你是否慎重考慮過用哪一種方式？你是否明白兩者的區(qū)別？如果你從未考慮過這些，現(xiàn)在考慮也不遲，這真的很重要，如果你真的想優(yōu)雅的運(yùn)用CSS，而不是被它耍的團(tuán)團(tuán)轉(zhuǎn)，如果你真的想把CSS寫出規(guī)模，那你就要認(rèn)真的思考這里面的邏輯。

先說說父元素的container加上padding的方式，子元素的背景將不會延伸到空白區(qū)域，另一種給子元素加margin的方式則反之。但我想先拋下這個表象，看看此時加上padding的父元素的邏輯。它意味著，我創(chuàng)建了一個容器，并且該容器的內(nèi)部有一些區(qū)域是被看不見的東西填充的，無論放入什么都不應(yīng)該占據(jù)這個區(qū)域。在你的腦海中想象一個厚厚的玻璃瓶，它就好像是在說“雖然我是透明的，但是在這厚厚的玻璃之內(nèi)才是你應(yīng)該呆的地方，無論是什么只要你想放在瓶子里”。現(xiàn)在來看看子元素，是的，其背景也應(yīng)該并且確實(shí)在內(nèi)部，而不該占據(jù)那段空白的區(qū)域。如果是為子元素加上margin，這意味著我在容器中創(chuàng)建了某個東西，而這個東西有一個自己的地盤，容器內(nèi)的其他東西都不能進(jìn)入這里。

所以他們的本質(zhì)區(qū)別在于其所表達(dá)的意義，也就是語義，一個是容器上的語義，另一個是容器內(nèi)元素的語義，主語也不同，謂語意義也不同。那么這能說明什么呢，不得不提一下高級語言中的高級，這代表某個語言將機(jī)器語言封裝的更好，接口更接近自然語言，其強(qiáng)大不言而喻。其實(shí)編程語言的發(fā)展軌跡就是不斷把機(jī)器語言往自然語言翻譯，讓人們可以更容易的跟機(jī)器溝通，終極目標(biāo)自然是人工智能，和機(jī)器用自然語言自由溝通。所以雖然代碼或者說CSS的語法并沒有什么變化，但我們應(yīng)該在思維上清楚的區(qū)分代碼片段的意圖和語義來寫CSS。

語言學(xué)家喬姆斯基曾構(gòu)造過一句符合語法的話:

  
“Colorless green ideas sleep furiously”

意思是無色的綠色想法憤怒的睡覺。想法睡覺是違反常識的，無色的綠色是矛盾的，憤怒的睡覺是不合常理的。僅僅符合語法是不夠的，僅僅不報錯也是不夠的，尤其是CSS這種描述性的語言很少會報錯，所以我想說的是，其描述性質(zhì)讓我們有更多選擇來實(shí)現(xiàn)我們所期望的效果，但我們卻應(yīng)該慎重，要讓語義分明，而不是在有限的語法規(guī)則下任意妄為，那樣寫不出好的CSS代碼。除了其本身的語法規(guī)則，我們必須自我約束，引入語義規(guī)則，不僅僅是為了提高可讀性這樣的理由，而是拉近人與機(jī)器的距離，讓我們在思維上更加和代碼契合，這樣才能寫出優(yōu)秀的程序。

言歸正傳，究竟如何語義化CSS呢。之前有講過OOCSS，其實(shí)面向?qū)ο蟮乃枷刖褪且环N語義化，將虛擬的元素看作實(shí)際的對象，用常識來構(gòu)造代碼，就像是用戶體驗(yàn)中的用戶習(xí)慣一樣，這是一種遍及全人類的用戶習(xí)慣，讓代碼更友好，即所謂的優(yōu)雅。

比如最常見的布局，我們一般都會有header、body和footer，這樣無需任何說明和規(guī)則，誰都會理解，header在前，footer在后，中間是body。有趣的是table中的thead、tbody和tfoot，由于加載優(yōu)化，我們即使把tfoot放在tbody前面，讓其先加載，但顯示的時候tfoot仍然會在tbody下面，由此可見語義化的重要，否則你一定會以為不是W3C的人弄錯了標(biāo)準(zhǔn)，就是瀏覽器廠商搞出了Bug。雖然這是HTML標(biāo)簽不是CSS，但我覺得這個例子很恰當(dāng)?shù)恼f明了一點(diǎn)，顯示邏輯是獨(dú)立的，不應(yīng)該和其他邏輯混為一談，它應(yīng)該只關(guān)心如何顯示。

再比如，一個導(dǎo)航條一般分為左右兩邊，里面各有若干鏈接。你會如何命名？navbar-left和navbar-right是Bootstrap所使用的class，但當(dāng)寬度減少，Responsive響應(yīng)式的Bootstrap會讓這些鏈接都收進(jìn)下拉菜單中，左和右又從何談起呢？同樣是Bootstrap中的顏色命名就做的十分成熟，不是green、blue、red這些詞匯，而是success、primary、warning這些詞，它們的區(qū)別是表現(xiàn)化與語義化的區(qū)別，我喜歡把這個叫做顯示邏輯。也就是說在class層面我們應(yīng)該只關(guān)注元素（或者說對象）是用來做什么的（意圖）以及它應(yīng)該表示什么（語義）。這里三種顏色代表成功、重要和警告，至于我們是用綠、藍(lán)和紅來表示還是通過其他什么顏色甚至形狀，應(yīng)該在style層面寫CSS屬性表示。如此我們使用class時無需迷茫于表示成功應(yīng)該用綠色還是紅色，意圖明確無誤。回到導(dǎo)航欄的例子，我們應(yīng)該使用main和sub之類的詞語標(biāo)識導(dǎo)航欄中重要的和次要的鏈接，即使在某些實(shí)現(xiàn)下，主要和次要沒有區(qū)別也不用擔(dān)心，那是該實(shí)現(xiàn)的顯示邏輯，我們不應(yīng)該橫加干涉。

說到class和style（樣式屬性），這又是一段混亂不清的關(guān)系。其實(shí)每當(dāng)我們要實(shí)現(xiàn)一個樣式，自覺或不自覺的都會考慮，是將元素和class一一對應(yīng)，然后為元素上的class寫style，還是用class和幾條style對應(yīng)之后在元素上搭配組合。前者的好處是每個class中的style不會影響其他class，但可用性十分的低，極端點(diǎn)說這已經(jīng)不算是在編程了，而是在畫頁面；后者的好處可以靈活使用不同的樣式搭配給元素使用，組合出元素需要的效果，但很難維護(hù)，牽一發(fā)動全身，樣式很難測試，無法保證在你動了一條style之后，沒有影響其他的地方。甚至最要命的是大部分CSS代碼都是無意識的游走在這兩種情況之間，所以我們要做的不是選擇一種極端，而是找到一個平衡點(diǎn)，并使用一些方法使得我們的CSS既能靈活復(fù)用在各種元素上，又能易于維護(hù)，不致修了這破壞那的情況。

首先，對于一個或一套元素的樣式，我們應(yīng)該有自己的創(chuàng)建原則，而不是想到哪寫到哪。比如，我一般使用這樣的步驟來創(chuàng)建元素：

首先僅關(guān)注結(jié)構(gòu)布局，以站點(diǎn)整體為基準(zhǔn)，將元素抽象為一個或多個結(jié)構(gòu)。

比如制作一個按鈕，你也許會發(fā)現(xiàn)它的尺寸和導(dǎo)航上的鏈接一致，而內(nèi)外邊距以及display和overflow之類的屬性又和頁面容器一樣，這時你就可以把按鈕的結(jié)構(gòu)拆成兩個結(jié)構(gòu)，一個是尺寸，一個是邊界邏輯，這種情況時常發(fā)生，所以有的CSS理論認(rèn)為應(yīng)該把width和height這對尺寸屬性和padding以及margin這對邊距屬性徹底的分開也是這個道理。其實(shí)并不是說它們4個放一起就決定不行，只是一般它們都有各自復(fù)用的價值，所以常常被拆開使用，歸根揭底這是由顯示邏輯決定的。

一般由于設(shè)計(jì)統(tǒng)一性，我們可以借助設(shè)計(jì)指導(dǎo)，輕松的制作出標(biāo)準(zhǔn)皮膚。但要注意的是，皮膚指的不僅僅甚至不一定是顏色之類的。繼續(xù)用Bootstrap舉例，有5種基礎(chǔ)顏色，但這并不是皮膚，5種顏色的語義不同，它們只是默認(rèn)用了5種顏色，勉強(qiáng)可以看作默認(rèn)皮膚，而真正的皮膚是theme，讓按鈕變得有立體感。還有一個誤區(qū)就是認(rèn)為哪幾種屬性是皮膚，哪幾種不是。就像前面所說的，我們要在語義上進(jìn)行劃分。一個屬性在某些意圖下可能是結(jié)構(gòu)，在另外的意圖中可能是皮膚。

舉個極端的例子，在一個Workshop中我用CSS和HTML制作了左邊這樣的Logo，Logo本身應(yīng)該完全算是皮膚，因?yàn)橐话銇碚f就是一張圖片，所以制作它的所有CSS屬性都應(yīng)該算作皮膚。下面的CSS代碼中，無論是定位還是文字的處理，以及尺寸等，都是為了構(gòu)造Logo，所以這些屬性都是皮膚。

css#logo i, #logo b {
  position: relative;
}
#logo i {
  left: -30px;
  transform: rotate(-30deg);
  font-size: 60px;
  letter-spacing: -11px;
  opacity: 0.3;
}
#logo b {
  top: -43px;
  left: 40px;
  font-size: 68px;
  word-break: break-all;
  width: 3px;
  line-height: 10px;
  text-indent: 6px;
}

  
原文