但是為什么到了CSS已經(jīng)如此強(qiáng)大(且瀏覽器支持度也都挺好)的年代，依然會(huì)出現(xiàn)那么多實(shí)質(zhì)還是以表現(xiàn)為中心提出的所謂“最佳實(shí)踐”？其實(shí)，這歸結(jié)起來，源于我們對(duì)于CSS復(fù)用的這種剛性需求。

以O(shè)OCSS為例，我們寫一組按鈕可能會(huì)這么寫：

.button-primary {
    width: 80px;
    height: 40px;
    background-color: green;
    ...
}

.button-error {
    width: 80px;
    height: 40px;
    background-color: red;
    ...
}

我不能每寫一個(gè)button都重復(fù)一遍寬高啊，要復(fù)用，所以我們可能會(huì)把公共部分提取出來

.button {
    width: 80px;
    height: 40px;
}

如果你秉承這個(gè)思路，當(dāng)哪天產(chǎn)品要求第一個(gè)按鈕要左排第二個(gè)要右排的時(shí)候，我估摸著你會(huì)很自然的這么去寫：

.float-left {
    float: left;
}
.float-right {
    float: right;
}

更甚者，哪天產(chǎn)品要求第二個(gè)按鈕跟右邊隔10像素，你會(huì)不會(huì)這么寫？

css我就不寫了mr10什么意思我猜你已經(jīng)知道了。。
且不說這種寫法中button本身就是一種冗余信息(我當(dāng)沒看見也罷)，mr10 則基本上無法忍受了，仔細(xì)想想這跟直接寫inline-style有什么差別？相反我寫inline-style更符合標(biāo)準(zhǔn)，至少我是掛載在專門用于描述表現(xiàn)的style屬性上面，而不是用來描述內(nèi)容的class上面。

基于這樣的一連串演進(jìn)，最后大概會(huì)誕生出兩個(gè)癥狀：

樣式類 即一系列諸如 mr10 fl之類的class

多class癥 即幾乎每個(gè)元素上都要掛載至少一個(gè)class。

原因在于，如果我們需要達(dá)到復(fù)用的效果，最后必定會(huì)魔障出一條理念：樣式需具備獨(dú)立性與上下文無關(guān)，同時(shí)粒度需要夠小(樣式類／通用原子類)。

其中也有一個(gè)主要原因是我們對(duì)CSS的誤解

css ＝ 層疊樣式表，其關(guān)鍵詞在層疊

“復(fù)用”需求最后一定會(huì)導(dǎo)致我們樣式退化到平級(jí)的單class規(guī)則定義，因?yàn)檫@樣才能足夠無狀態(tài)。但實(shí)際上CSS最獨(dú)特的地方在于層疊，你避開這種機(jī)制從而來滿足復(fù)用需求，最后不單單喪失了CSS的能力，反而會(huì)催生出一系列不符合語義化標(biāo)準(zhǔn)的反模式。

但是我也說過，復(fù)用是剛需，而CSS又不具備抽象能力，所以我們只能眼睜睜的看著一坨坨屎流行么？

好在我們有預(yù)處理器

Sass/Less我這里就不一一贅述了，時(shí)至今日相比大家都很熟悉。為什么說最佳實(shí)踐是Sass/Less呢？簡單來說，就是這類預(yù)處理器在提供一定的抽象能力的同時(shí)，也不會(huì)破壞css自身的特性。拿上面的例子來看，如果我們使用Sass/Less的寫法：

%button {
    width:80px;
    height:40px;
}

.button-primary {
    @extend %button;
    background-color: white;
}

.button-success {
    @extend %button;
    background-color: green;
}
.button-error {
    @extend %button;
    background-color: red;
}

如果我們在項(xiàng)目級(jí)別需要統(tǒng)一的配色，可以做進(jìn)一步的抽象

$primary-bgc: white;
$success-bgc: green;
$error-bgc: red;
.button-primary {
    @extend %button;
    background-color: $primary-bgc;
}
.button-success {
    @extend %button;
    background-color: $success-bgc;
}
.button-error {
    @extend %button;
    background-color: $error-bgc;
}

同樣的手段還有mixin。
我們可以將我們需要復(fù)用的“樣式類”抽象成placeholder／mixin(對(duì)于“通用原子類”這樣的需求我推薦用placeholder)，然后使用語義化的 class／屬性 作為鉤子，來組裝這些“原子類”(但實(shí)際上這些“原子類”對(duì)CSS而言是不可見的)。比如我們用a標(biāo)簽來模擬一個(gè)提交按鈕，我們應(yīng)該這樣寫：

提交

a[role="submit-button"] {
    @include .button-success;
}

所以css的最佳實(shí)踐應(yīng)該是： Sass + OOCSS/BEM/METACSS

這里有一個(gè)關(guān)鍵點(diǎn)在于，我們在使用這些css抽象方法論來寫sass的時(shí)候，切記不要把中間變量暴露給css。什么意思呢，button那個(gè)例子我這樣來寫

.button{
    width: 80px;
    height: 40px;
}
.button-primary {
    @extend .button;
}

此時(shí)button對(duì)于css而言是可見的。對(duì)于button這類抽象產(chǎn)物，我們應(yīng)該用placeholder和mixin代替，確保其對(duì)css的不可見從而保證web的“純度”。(這也是我不推薦Less的原因，Less最大的失誤在于沒有placeholder的設(shè)計(jì))

到這里估計(jì)思考過的同學(xué)會(huì)有疑問：很多場景可能并沒那么容易語義化，比如我要第一個(gè)元素左浮動(dòng)，第二個(gè)元素右浮動(dòng)，第三個(gè)又左浮動(dòng)，第四個(gè)右浮動(dòng)。。。

這里需要提到另一個(gè)經(jīng)常被誤解的點(diǎn)：selector。selector作為HTML與CSS的結(jié)合點(diǎn)，實(shí)質(zhì)上也是需要語義化的。tag跟id是天生帶語義的，主要問題還是出在class上。我們總是嘗試在class上掛載一些表現(xiàn)型的“名稱”。這里面有一小部分確實(shí)是由于CSS本身的不完美(比如layout這種場景細(xì)則就比較難語義)導(dǎo)致的，但是過多的則歸咎于我們語義化動(dòng)力不足及對(duì)selector的認(rèn)知不夠。語義化動(dòng)力不足完全是主觀因素這里不贅述，對(duì)selector認(rèn)知不夠則是最普遍存在的情況。推薦閱讀：為后代選擇器及id選擇器辯護(hù) 結(jié)合智能選擇器的語義化的CSS

綜上所述，如果要秉持純粹的Web開發(fā)，最佳實(shí)踐是：
合適的語義化標(biāo)簽 ＋ 語義化selector ＋ Sass

其實(shí)我不太想回答這種問題。。。我更想反問：為什么不按標(biāo)準(zhǔn)來？??！

一定要說的話：

推行標(biāo)準(zhǔn)的目的是為技術(shù)交流構(gòu)建一個(gè)統(tǒng)一的上下文語境平臺(tái)，提高溝通效率，避免雞同鴨講。

同時(shí)標(biāo)準(zhǔn)跟規(guī)范的制定是經(jīng)過一群 資深開發(fā)者／科學(xué)家 經(jīng)過仔細(xì)研究及社區(qū)討論的，一套完整的一致的基礎(chǔ)架構(gòu)系統(tǒng)是推進(jìn)生態(tài)發(fā)展的必要條件。

就Web語義化這件事情而言，如果你的HTML是基于標(biāo)準(zhǔn)來編寫的，意味著你的頁面具備更多的可能性。比如搜索引擎友好，多終端適配(不是響應(yīng)式。。是指兼容各種閱讀設(shè)備、讀屏軟件等。參見microformats)，更智能的風(fēng)格查錯(cuò)能力。

在前端開發(fā)體系里，能體系專業(yè)性的地方不多。。拿程序復(fù)雜度而言，它跟大型后端系統(tǒng)差不止一個(gè)量級(jí)(前端的難度在于工程上)。。好不容易有一個(gè)能體現(xiàn)專業(yè)素養(yǎng)的領(lǐng)域(語義化Web)，為什么我們不抓住機(jī)會(huì)為自己正名呢。。

推薦閱讀：

http://hax.iteye.com/blog/497338

http://hax.iteye.com/blog/500015

http://hax.iteye.com/blog/849826