隨著css的發(fā)展，使用css有語(yǔ)義化的命名約定和css層的分離，將有助于它的可擴(kuò)展性，性能的提高和代碼的組織管理。
在我前面的文章中討論很多關(guān)于css的問(wèn)題都可以通過(guò)使用一個(gè)適當(dāng)?shù)腸ss策略來(lái)避免。在這篇文章里，我將著重于討論使用一種方法或者一個(gè)命名規(guī)則所帶來(lái)的好處。
這里有很多可供使用的前端方法和命名規(guī)則，每個(gè)都有自己的優(yōu)缺點(diǎn)。在幾乎所有的案例中css被分割成更易于管理的代碼“塊”。css的這種分割方式定義了每一種方法。
命名規(guī)則
一個(gè)可靠命名規(guī)則的重要性是不可忽視的。就像組織結(jié)構(gòu)帶來(lái)的好處一樣，這里有很多性能上的優(yōu)勢(shì)讓你能夠堅(jiān)持地，有責(zé)任感地去命名你的選擇器。
正確使用任何規(guī)則將會(huì)在大型項(xiàng)目減少與css相關(guān)的憂慮而發(fā)揮關(guān)鍵的作用
代碼如下:
bem
最流行的命名規(guī)則之一就是bem(block：塊，element：元素，modifier：修飾符)。通過(guò)給每個(gè)元素添加它的父級(jí)block模塊作為前綴，使得目標(biāo)的安全性變得更加簡(jiǎn)單了。bem還有助于消除頁(yè)面和body類對(duì)嵌套或者附加樣式依賴。
css code
.block {}
.block__element {}
.block--modifier {}
上面的例子展示了一個(gè)bem項(xiàng)目的類結(jié)構(gòu)，下劃線(__)被用來(lái)區(qū)分元素，而用連字符(--)是用來(lái)修飾元素的。下面是一個(gè)現(xiàn)實(shí)世界的例子...
css code
.product-details {}
.product-details__price {}
.product-details__price--sale {}
bem中的一個(gè)圈套是引誘在修飾部分中添加多種用途的樣式類。大的，小的，綠色的或者醒目的等修飾選擇器被提出引入到標(biāo)記中，這在不久的將來(lái)將會(huì)發(fā)生改變。
css code
.product-details {}
.product-details__title {}
.product-details__title--small {}
像大多數(shù)的多用途類一樣，在項(xiàng)目一開(kāi)始的時(shí)候意圖很明顯，但是當(dāng)一個(gè)設(shè)計(jì)改變的時(shí)候常常會(huì)導(dǎo)致矛盾的css。
suit
suit起源于bem，但是它對(duì)組件名使用駝峰式和連字號(hào)把組件從他們的修飾和子孫后代中區(qū)分出來(lái)。
css code
.u-utility {}
.componentname {}
.componentname--modifiername {}
.componentname-descendantname {}
.componentname.is-somestate {}
通過(guò)消除潛在的混亂連字符號(hào)連接元素名來(lái)使得選擇器的可讀性更強(qiáng)。
css code
.productdetails {}
.productdetails-price {}
.productdetails-title--sale {}
加前綴
如果你不想使用如此嚴(yán)格或者復(fù)雜的命名規(guī)則，給每一個(gè)選擇器加前綴同樣可以達(dá)到這樣的效果。
css code
.s-product-details {}
.t-product-details {}
.js-product-details {}
這種方法使得它很容易的在表象類中辨別結(jié)構(gòu)類但是只是簡(jiǎn)單的寫(xiě)和理解。在上面的例子中的結(jié)構(gòu)屬性將會(huì)被應(yīng)用到s-product-details選擇器中。主題屬性將應(yīng)用于t-product-details選擇器。
元素可以以同樣的方式定義或者使用基類和修飾類...
xml/html code
button
checkout button
search button
從一方面說(shuō)明在sass partials中加前綴對(duì)于當(dāng)在文件夾中刪除必要的存儲(chǔ)partials時(shí)對(duì)一個(gè)很大的項(xiàng)目文件定位是很有幫助的。這種方法被使用于itcss中。
你選擇什么都沒(méi)有問(wèn)題，重要的是記住你的選擇,并將他們應(yīng)用到整個(gè)項(xiàng)目中。
方法
隨著命名規(guī)則的增加，css變得更安全，更高效了。由于較小的css文件和更少的權(quán)重問(wèn)題，所需要的嵌套選擇器將會(huì)減少。
盡管有這些改進(jìn)你仍可以像下面的這個(gè)例子使用復(fù)制的css來(lái)完成樣式。
css code
.product-details__title {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
text-transform: uppercase;
color: #333;
}
.latest-news__title {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
text-transform: uppercase;
color: #ff0000;
}
這就是前端的方法的由來(lái)，將你的css劃分層次會(huì)有助于防止重復(fù)的樣式和大分組的選擇器。共同或者基礎(chǔ)的樣式被分開(kāi)定義，而更具體或者修飾的樣式被添加到繼承樣式的頂部。
oocss
面向?qū)ο骳ss有兩個(gè)主要的原則第一是表現(xiàn)與結(jié)構(gòu)分離，第二是容器與內(nèi)容分離。這兩個(gè)原則的設(shè)計(jì)是用來(lái)通過(guò)創(chuàng)建可復(fù)用的css模塊以提高性能。
表現(xiàn)與結(jié)構(gòu)分離：
css code
.product-image {
width: 400px;
overflow: hidden;
}
.product-description {
width: 500px;
min-height: 200px;
overflow: auto;
}
.box-padded {
background: #fff;
padding: 10px;
}
```
內(nèi)容與容器分離：
css code
.wrapper {
width: 400px;
margin: 0 auto;
overflow: hidden;
}
.recently-viewed {
border: solid 1px #ccc;
background: #fff;
color: ￡666;
}
.suggested-products {
border: solid 1px #ccc;
background: #fff;
color: ￡666;
}
這種面向?qū)ο蟮墓ぷ鞣绞絼?chuàng)建了一系列可以用來(lái)設(shè)置css屬性的多種用途類。這種工作方式可以提高站點(diǎn)性能和維護(hù)以及保持css文件的dry原則。
即使標(biāo)記的多個(gè)主題是一致的，一個(gè)面向?qū)ο蠓椒梢蕴砑映C正的css用來(lái)覆蓋或刪除不想要的繼承樣式。
css code
product-delivry.padded-box {
padding:0
}
smacss
smacss像oocss一樣以減少重復(fù)樣式為基礎(chǔ)。然而smacss使用一套五個(gè)層次來(lái)劃分css給項(xiàng)目帶來(lái)更結(jié)構(gòu)化的方法。
base - html elements & defaults
layout -page structure
module - re-usable code bloks
state - active/inactive etc
theme - typography and colour schemes etc
這個(gè)增加的組織和結(jié)構(gòu)提高了輸出的css的效率。這個(gè)方法同樣適用于需要添加或者刪除層次的地方。
itcss
itcss是一個(gè)完全不同于smacss的全新的方法，它創(chuàng)造了一系列的層次來(lái)管理依賴關(guān)系和促進(jìn)可擴(kuò)展性。基礎(chǔ)的層次包括通用和廣泛的選擇器。頂部的層次包含了局部模塊具體化的選擇器。整套的層次如下...
tools?—?default mixins & functions
generic?—?normalize, resets, box-sizing
base?—?html elements
objects?—?design patterns
components?—?modules & blocks of code
trumps?—?helpers & overrides
每個(gè)層次增加的權(quán)重，只允許添加額外的要求。
以上面同樣的例子，css將會(huì)被劃分為基礎(chǔ)層和組件層。
css code
p {
font-family: 'helvetica neue', helvetica, arial, sans-serif;
font-size: 14px;
}
.product-details__title {
color: #333;
}
.latest-news__title {
color: #ff0000;
}
使用前請(qǐng)注意
你僅僅是可以決定使用上述策略之一，但是你不是全部都得靠它。如果某一層次并不適合你的項(xiàng)目那么就不要使用它了。你也可以改變或者增加一些東西來(lái)使得它適應(yīng)你的項(xiàng)目和團(tuán)隊(duì)的需求。命名規(guī)則或者方法并不是每個(gè)時(shí)候都能100%的適合所有項(xiàng)目。
你也可以創(chuàng)建你自己的方法或者命名規(guī)則，允許一個(gè)量身定制的解決方案來(lái)完美的適應(yīng)你項(xiàng)目的需求。定制解決方案的一個(gè)不足之處就是缺乏社區(qū)的支持和文檔。