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

前一陣子在項(xiàng)目組中講了一個(gè)關(guān)于CSS的Session，在講之前我曾收到了許多意見(jiàn)，大部分是希望能講講CSS實(shí)用性的技術(shù)，比如盒模型，CSS3之類的。干貨人人都喜歡，因?yàn)榭吹靡?jiàn)摸得著，拿來(lái)就有用，但我最后還是決定講一些”濕貨“。因?yàn)樵贑ode Diff的時(shí)候我發(fā)現(xiàn)了許多樣式的問(wèn)題不是由于不會(huì)寫(xiě)CSS導(dǎo)致的，而是由于在錯(cuò)誤的地方使用了寫(xiě)在錯(cuò)誤地方的樣式。

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

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

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

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

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

  
“Colorless green ideas sleep furiously”

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

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

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

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

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

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

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

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

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

舉個(gè)極端的例子，在一個(gè)Workshop中我用CSS和HTML制作了左邊這樣的Logo，Logo本身應(yīng)該完全算是皮膚，因?yàn)橐话銇?lái)說(shuō)就是一張圖片，所以制作它的所有CSS屬性都應(yīng)該算作皮膚。下面的CSS代碼中，無(wú)論是定位還是文字的處理，以及尺寸等，都是為了構(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;
}

  
原文