前言：這篇翻譯節(jié)選自兩篇關(guān)于CSS書寫規(guī)范和技巧的博文。CSS，或者其他語言的書寫格式，各人都有各人的習(xí)慣，但是如果牽扯到可持續(xù)性，牽扯到你的代碼未來可能被他人所重寫、所重用，那么書寫時采用一定的可讀、可調(diào)用標(biāo)準(zhǔn)也就是十分有必要的。下面節(jié)選的都是自己認(rèn)為比較重要、或者平時容易忽視的點(diǎn)，希望能幫到大家。
原文：
《Enduring CSS: writing style sheets for rapidly changing, long-lived projects》
1.支持技術(shù)和工具
不管你用Sass、LESS、Stylus、Myth哪種預(yù)處理工具來編寫樣式表，這些都不重要。重要的是，無論編寫者的風(fēng)格如何，預(yù)處理工具應(yīng)該能便捷、快速地處理成其他元語言。
好的預(yù)處理工具滿足以下要求就足夠了：
* 變量名用不同的顏色標(biāo)示出來，以防人為輸入錯誤；而常量數(shù)字最好用度量的方式來指定
* 可自定義代碼段風(fēng)格，便于控制同一分支或者模板的代碼中
* 支持基本數(shù)學(xué)運(yùn)算，不要依賴于“magic number”（魔法數(shù)，沒有來源、無法判斷含義的數(shù)）
* 可控制代碼顯示顏色，使界面明晰
2.CSS書寫風(fēng)格
很多人都認(rèn)為要寫盡可能不重復(fù)（“DRY”）、高度抽象的樣式，CSS文件要精簡到最小。我卻不這么想，相反，很多情況下，我并不會死守那些大眾化規(guī)范。我寫代碼的首要目標(biāo)，是使代碼保持長期的穩(wěn)定性，以適應(yīng)快速發(fā)展的web應(yīng)用的需求。
以下是我自己的“FUN”法則（Flat hierachy selectors 選擇器淺繼承 / Utility styles 采用實(shí)用樣式 / Name-spaced components 元素分隔命名），僅供參考：
* 選擇器淺繼承：除了特殊情況，一般只用類選擇器，盡量不使用ID選擇器；如非必要，不要嵌套選擇器。
* 采用實(shí)用樣式：使用單一效用風(fēng)格，如類名`w100`表示 `width:100%` ，`Tbl`表示`display:table;table-layout:fixed` 等等，它們的樣式不因所應(yīng)用的元素而改變。
* 元素分隔命名：一般每2-3個字母為一部分，中間用“-”隔開。如設(shè)置購物車（shoppingcart）類元素，則使用 `.sc-` 為類名前綴，如果是新版的購物車，那就用 `.sc2-` 作為前綴，以此類推。而元素內(nèi)部的不同部件，則在“-”后加部件名即可，如購物車的`wrapper`則可使用 `.sc-wrapper` ，移除按鈕則使用 `.sc-RemoveItem` ，等等。
我不擔(dān)心CSS代碼膨脹嗎？
當(dāng)然擔(dān)心。不過，仔細(xì)想想，為了使代碼盡可能簡化，使用1對1、難以修改、難以重用的代碼，面對快速發(fā)展的項(xiàng)目時時刻刻可能存在的修改要求下，你可能需要重新復(fù)制多種相同的樣式賦予給新的元素，這樣一來不僅沒有節(jié)省空間，反而增加了許多重復(fù)的樣式。而且，在對原版本進(jìn)行刪改時，你無法把原有元素對應(yīng)的樣式清除干凈，即使在文本編輯器里使用ctrl+F遍歷所有的CSS/JS文件，也不見得能把原有樣式完全清理。
如果像我一樣使用元素分割的方法來命名，那就可以很放心、很輕松地清除掉你不需要的樣式。比如更換購物車的樣式版本，只需要在CSS/JS里把全部 `.sc-` 前綴的樣式去掉，在HTML中把標(biāo)簽里的`class=“sc-”` 替換為 `class=“sc2-”` 即可。
3.項(xiàng)目文件管理
一般我把不同的文件放置在不同的文件里，不僅按照它的文件類型分目錄，還會根據(jù)它所控制的視覺元素來命名分組：
`html/
- shopping-cart-template.html
- callouts-template.html
- products-template.html
js/
- shopping-cart-template.js
- callouts-template.js
- products-template.js
css/
- shopping-cart-template.css
- callouts-template.css
- products-template.css`
這樣一來，我們可以通過`include`在css中來調(diào)用其他的css文件。假如，我們需要制作一個站點(diǎn)的首頁，那么它的css中只需要這樣調(diào)用：
首頁css（大小20KB）
`@include "core";
@include "_components/nav";
@include "_components/home-offer";`
而它其中一個子頁面，則可以這樣調(diào)用：
offers頁css（大小45KB）
`@include "core";
@include "_components/forms";
@include "_components/login";
@include "_components/callouts";`
還有個小技巧，如果你需要調(diào)用某一頁面文件夾里所有的樣式文件或者其他元素，你只需要通過調(diào)用通配符即可：
`@include "_components/login/**";`
?4.命名規(guī)則
說道CSS命名，并沒有一套必須遵守的原則，適合自己的就是最好的。目前為止最通用的標(biāo)準(zhǔn)是經(jīng)典BEM句法，有興趣的讀者們可以自行點(diǎn)擊查看。
我自己的命名規(guī)則是：
[命名空間]-[元件名]_[變量名]-[可附加尾部]
那么，真實(shí)項(xiàng)目中的類名就大概是這樣：`sc-Wrapper`、`sc-InnerItem_Odd`
不要過于抽象
對于邏輯型的編譯文件，并不是越簡潔越好。例如Sass中的傳參過程，寫得詳細(xì)點(diǎn)，標(biāo)注參數(shù)的意思，能更方便以后的理解。
`/* ===================================================
Table modifiers ===================================================
*/
$widths: 5 10 20 30 40 50 60 70 80 90 100;
%Tbl-base { ? ?
? ? ? ?display: table; ? ?
? ? ? ?float: left;? ?
? ? ? ?vertical-align: middle;
}
@each $width in $widths {? ?
? ? ? ?.tbl#{$width} {? ? ? ?
? ? ? ?@extend %Tbl-base;? ? ? ?
? ? ? ?width: $width * 1%;? ?
? ? ? ?}
}`
不要依賴編譯器
現(xiàn)在，越來越多的CSS文件都是通過sass等類似工具整合編譯的。不要過分依賴編譯器，有時候它會加入一些你并不需要的代碼，所以，編譯過后的css文件最好自己再瀏覽一遍。
