什么是語義化：語義化Web具備讓數(shù)據(jù)跨終端共享／重用的能力项戴。
對(duì)于HTML體系而言形帮，Web語義化是指使用語義恰當(dāng)?shù)臉?biāo)簽，使頁(yè)面有良好的結(jié)構(gòu)，頁(yè)面元素有含義辩撑，能夠讓人和機(jī)器都容易理解界斜。
語義化說起來好像都懂，但是實(shí)際情況并不是那么樂觀合冀。
再談各種所謂的CSS設(shè)計(jì)模式
OOCSS (Object Oriented CSS)
目標(biāo)：
- 減少對(duì)HTML結(jié)構(gòu)的依賴
- 增加CSS class重復(fù)性的使用
<div class="item">
<ul class="item-list">
<li class="item-list--item">
<h3 class="item-heading">...
<button class="button button-primary">primary</button>
<button class="button button-info">info</button>
SMACSS(Scalable and Modular Architecture for CSS)：一種css架構(gòu)風(fēng)格各薇。
<div class=“container”>
<div class=“container-header”>
<div class=“container-header__title”>
<h1 class=“container-header__title--home”>
BEM(Block,Element,Modular)：與SMACSS類似。
<ul class="menu">
<li class="menu__item">...</li>
<li class="menu__item_state_current">...</li>
<li class="menu__item">...</li>
</ul>
METACSS | ATOMCSS (原子CSS)
<div class="fl mr10 red">
<span class="blue fl"></span>
</div>
為什么會(huì)有這么多層出不窮(千奇百怪)的CSS設(shè)計(jì)模式
1.CSS本身的不足君躺，不具備邏輯表達(dá)能力 & 抽象能力
2.We had to maintain a shit峭判。。晰洒。所以我們需要更有效的去減少讓自己惡心的成本朝抖。。
但這些都只是部分客觀原因谍珊，主要原因在于我們對(duì)于Web語義化的理解度不夠以及非正確的工作流治宣。
以表現(xiàn)為中心(面向UI) VS 以信息為中心(面向語義)
以表現(xiàn)為中心的工作流： 需求原型 --> UI設(shè)計(jì)稿 --> 以HTML／CSS實(shí)現(xiàn)設(shè)計(jì)稿
以信息為中心的工作流： 需求原型 --> 分析需求并以HTML描述 --> UI設(shè)計(jì)稿 --> 分析樣式并以CSS實(shí)現(xiàn)
兩者最大的區(qū)別在于，對(duì)于面向UI的工作流而言砌滞，HTML／CSS只是實(shí)現(xiàn)UI的手段侮邀，而對(duì)于純正的Web開發(fā)(面向語義的工作流)而言，我們應(yīng)該是以信息為中心的贝润，即首先考慮信息的本質(zhì)(語義)绊茧，并以合適的標(biāo)簽來標(biāo)記，最后再考慮樣式和行為(UI)打掘。
之所以會(huì)有那么多層出不窮(不知所謂)的CSS設(shè)計(jì)模式华畏，是因?yàn)樗鼈兇蠖际且员憩F(xiàn)為中心提出的“最佳實(shí)踐”，而這兩種方法論本身又是不適配的尊蚁。
為什么說面向語義(以信息為中心)才是純正的Web開發(fā)
1.Web誕生的目的是用于在網(wǎng)絡(luò)上傳遞資源跟信息的亡笑。HTML設(shè)計(jì)之初是用來作為互聯(lián)網(wǎng)上主要的內(nèi)容載體，其本身是用來描述信息的横朋。在最早期的Web時(shí)代仑乌，HTML作為一種通用的描述語言用來表述在互聯(lián)網(wǎng)上傳輸／共享的文檔的信息。
Web 萬維網(wǎng)
HTML 作為一種對(duì)計(jì)算機(jī)而言通用易懂的母語
2.Web領(lǐng)域的一套基礎(chǔ)架構(gòu)跟技術(shù)（包括HTTP琴锭、REST晰甚、HTML等），是按照語義中心的方式設(shè)計(jì)出來的决帖。如果采用UI中心的方法論厕九，必然導(dǎo)致阻抗不匹配。
3.w3c官方也在致力于推廣Web語義化
- 各種表現(xiàn)型標(biāo)簽／屬性在HTML5中被廢棄／不推薦使用(center地回、big扁远、width等)
- HTML5中新增的各種語義化標(biāo)簽(header腺阳、nav等)，而這些標(biāo)簽在表現(xiàn)上跟div無二穿香。
CSS語義化？
通常意義上我們說的CSS語義指的是class的語義绎速。class作為HTML與CSS之間的主要鉤子皮获，卻是被我們誤解最深的一個(gè)東西。
class屬性本意是用來描述元素內(nèi)容的纹冤，而不是描述元素展現(xiàn)的洒宝。其典型‘反模式’代表就是METACSS。
看看這兩段代碼萌京，哪一個(gè)更容易理解雁歌？
<!-- 以表現(xiàn)為中心 -->
<div class="fl mr10">
<span>userName:Kuitos</span>
<div>
<!-- 以信息為中心 -->
<div class="user-info">
<span>userName:Kuitos</span>
<div>
class作為HTML描述屬性集的一部分，本身是用來細(xì)化內(nèi)容語義的知残，所謂的CSS語義化本質(zhì)上就是HTML語義化靠瞎。
符合標(biāo)準(zhǔn)的最佳實(shí)踐
在CSS領(lǐng)域發(fā)展的初期，嚴(yán)格意義上的“最佳實(shí)踐”都是不存在的求妹，這主要受制于CSS的支持度乏盐，大部分瀏覽器的CSS的支持不夠好，所以也導(dǎo)致我們很難在表現(xiàn)及語義之間做平衡制恍。所以我們?cè)诜碒TML標(biāo)簽的時(shí)候會(huì)看到諸如<b><center>這類純樣式的歷史性標(biāo)簽(這些標(biāo)簽已經(jīng)不被HTML5 spec推薦使用)父能。
但是為什么到了CSS已經(jīng)如此強(qiáng)大(且瀏覽器支持度也都挺好)的年代，依然會(huì)出現(xiàn)那么多實(shí)質(zhì)還是以表現(xiàn)為中心提出的所謂“最佳實(shí)踐”净神？其實(shí)何吝，這歸結(jié)起來，源于我們對(duì)于CSS復(fù)用的這種剛性需求鹃唯。
以O(shè)OCSS為例爱榕，我們寫一組按鈕可能會(huì)這么寫：
<button class="button-primary"></button>
<button class="button-error"></button>
.button-primary {
width: 80px;
height: 40px;
background-color: green;
...
}
.button-error {
width: 80px;
height: 40px;
background-color: red;
...
}
我不能每寫一個(gè)button都重復(fù)一遍寬高啊，要復(fù)用俯渤，所以我們可能會(huì)把公共部分提取出來呆细。
<button class="button button-primary"></button>
<button class="button button-error"></button>
.button {
width: 80px;
height: 40px;
}
如果你秉承這個(gè)思路，當(dāng)哪天產(chǎn)品要求第一個(gè)按鈕要左排第二個(gè)要右排的時(shí)候八匠，我估摸著你會(huì)很自然的這么去寫：
<button class="button button-primary float-left"></button>
<button class="button button-error float-right"></button>
.float-left {
float: left;
}
.float-right {
float: right;
}
更甚者絮爷，哪天產(chǎn)品要求第二個(gè)按鈕跟右邊隔10像素，你會(huì)不會(huì)這么寫梨树？
<button class="button button-error float-right mr10"></button>
css我就不寫了mr10什么意思我猜你已經(jīng)知道了坑夯。。
且不說<button class="button button-primary"></button>這種寫法中button本身就是一種冗余信息(我當(dāng)沒看見也罷)抡四，mr10則基本上無法忍受了柜蜈，仔細(xì)想想這跟直接寫inline-style有什么差別仗谆？相反我寫inline-style更符合標(biāo)準(zhǔn)，至少我是掛載在專門用于描述表現(xiàn)的style屬性上面淑履，而不是用來描述內(nèi)容的class上面隶垮。
基于這樣的一連串演進(jìn)，最后大概會(huì)誕生出兩個(gè)癥狀：
1.樣式類 即一系列諸如 mr10 fl之類的class
2.多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ù)處理器
最佳實(shí)踐 Sass/Less
Sass/Less我這里就不一一贅述了，時(shí)至今日相比大家都很熟悉驶臊。為什么說最佳實(shí)踐是Sass/Less呢挪挤？簡(jiǎn)單來說，就是這類預(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;
}
如果我們?cè)陧?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 href＝"#" role="submit-button">提交</a>
a[role="submit-button"] {
@include .button-success;
}
所以css的最佳實(shí)踐應(yīng)該是： Sass + OOCSS/BEM/METACSS
這里有一個(gè)關(guān)鍵點(diǎn)在于室奏，我們?cè)谑褂眠@些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ì)有疑問：很多場(chǎng)景可能并沒那么容易語義化，比如我要第一個(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這種場(chǎng)景細(xì)則就比較難語義)導(dǎo)致的叽赊，但是過多的則歸咎于我們語義化動(dòng)力不足及對(duì)selector的認(rèn)知不夠。語義化動(dòng)力不足完全是主觀因素這里不贅述必搞，對(duì)selector認(rèn)知不夠則是最普遍存在的情況必指。推薦閱讀：為后代選擇器及id選擇器辯護(hù) 結(jié)合智能選擇器的語義化的CSS。
為什么一定要按標(biāo)準(zhǔn)來恕洲？
其實(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è)面具備更多的可能性。比如搜索引擎友好晴玖，多終端適配(不是響應(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
