這些推薦使用的CSS命名和書寫規範，你應該知道

選擇器的命名規範

1、子產品化命名

例如：

• 與布局相關的樣式以“g”為開頭。如“g-content”和“g-header”；
• 與挂鈎相關的樣式以“j”為開頭。如“j-open”和“j-request”；
• 與元件相關的樣式以“m”為開頭。如“m-dropMenu”和“m-slider”；
• 與狀态相關的樣式以“s”為開頭。如“s-current”和“s-selected”；
• 與工具相關的樣式以“u”為開頭。如“u-clearfix”和“u-ellipsis”。

“工具”是指與業務邏輯解耦的，能夠重用的樣式；“元件”是指自定義的可重用且可移植的基本網頁元素；“挂鈎”是指供JavaScript操縱的樣式。

以上的說明隻是舉例，大家可以根據項目需求自定義開頭的字元，這樣做的目的是使CSS代碼整潔易維護。

2、選擇器皆為小寫形式

推薦的寫法：

.g-first-header
{
    line-height: 16px;
}      

不推薦的寫法：

.g-FirstHeader
{
    line-height: 16px;
}      

3、每個選擇器獨占一列

除最後一個選擇器外，其它每一列選擇器均以逗号結尾。若用到兄弟元素選擇器，則相關符号的左右兩端均留出一個半角空格。

推薦的寫法：

.g-first-header,
.g-second-header-1 > .g-second-header-2
{
    border: 2px solid #C3C3C3;
}      

不推薦的寫法：

.g-first-header, .g-second-header-1>.g-second-header-2
{
    border: 2px solid #C3C3C3;
}      

4、避開HTML标記

建構選擇器時應盡量采用語義明确的類别名稱，避開HTML标記，因為一旦HTML的結構産生更動，則與此對應的樣式也就無效了。盡量将樣式與結構分離，這樣會使得階層式樣式表在日後更易被維護。

推薦的寫法：

.g-content .g-item
{
    flex-basis: 20%;
}      

不推薦的寫法：

.g-content li
{
    flex-basis: 20%;
}      

5、少用ID

ID的唯一性注定了它所對應的元素的樣式就是一次性的，無法重用，一旦HTML結構發生變化，套用ID的選擇器就要随之修改。另一個重要的原因是：ID的權重值是最高的，這可能會導緻日後添加的樣式無法複寫原先的樣式。

推薦的寫法：

.g-special-content
{
    height: 100px;
    width: 300px;
}      

不推薦的寫法：

#special-content
{
    height: 100px;
    width: 300px;
}      

屬性的書寫規範

1、按順序排列屬性

每條規則下的屬性在書寫時，應按類别進行分組，其排列順序如下：

1. 位置：bottom、float、display、left、position、right、top和z-index等；
2. 大小：height、margin、padding和width等；
3. 版式：color、font、letter-spacing、line-height和text-align等；
4. 背景：background等；
5. 其它：animation和transition等。

2、縮寫屬性

有些屬性是可以合在一塊的，既精簡代碼，又便于閱讀。

推薦的寫法：

.test-selector-1
{
    padding: 3px 5px;
}      

不推薦的寫法：

.test-selector-1
{
    padding-top: 3px;
    padding-right: 5px;
    padding-bottom: 3px;
    padding-left: 5px;
}      

3、去除小數開頭的0

推薦的寫法：

.test-selector-2
{
    font-size: .5em;
}      

不推薦的寫法：

.test-selector-2
{
    font-size: 0.5em;
}      

4、縮寫十六進位值

推薦的寫法：

.test-selector-3
{
    background-color: #0b0;
}      

不推薦的寫法：

.test-selector-3
{
    background-color: #00bb00;
}      

5、合理使用引号

對于“font-family”屬性來說，我們通常會以引号夾住帶有空格的字型名稱，而對于不具備這些特征的一般字型來說，引号存在與否并不影響頁面的顯示效果。為了保證視覺上的統一，最大程度相容各種浏覽器，建議你在所有字型名稱的兩端均加上引号。

推薦的寫法：

.test-selector-4
{
    font-family: "Microsoft YaHei", "微軟正黑體", "\5b8b\4f53";
}      

不推薦的寫法：

.test-selector-4
{
    font-family: "Microsoft YaHei", 微軟正黑體, \5b8b\4f53;
}      

個别屬性的值含有“url（）”字串，開發者需要往其中傳入一個資源路徑。請注意，在低版本的Internet Explorer中，路徑中的空格有可能無法被辨識，導緻資源無法被找到。為保險起見，不論路徑中是否含有空格，你傳入的路徑兩端最好都加上引号。

推薦的寫法：

.test-selector-5
{
    background-image: url(“../Images/BacPic.png”);
}      

不推薦的寫法：

.test-selector-5
{
    background-image: url(../Images/BackPic.png);
}      

6、避開 !important

“!important”會給日後的維護帶來麻煩，使開發者難以查找樣式問題。如果在書寫時發現新樣式無法複寫舊樣式。通常有兩個原因：要麼新樣式寫在了舊樣式的前面，要麼新樣式對應的選擇器的權重比舊樣式的更低。針對後一種情況，隻要增加新樣式選擇器的權重值就可以完全避開這個問題，無需用到“！important”。

推薦的寫法：

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}


.test-selector-6 .test-selector-7 .test-selector-8
{
    font-size: 14px;
}      

不推薦的寫法：

.test-selector-6 .test-selector-7
{
    font-size: 16px;
}


.test-selector-8
{
    font-size: 14px !important;
}      

7、規範注釋

在單列注釋中，星号與内容之間留一個半角空格。

推薦的寫法：

/* 這是第一段注釋文字。 */


// 這是第二段注釋文字。      

不推薦的寫法：

/*這裡是一段注釋文字。*/


//這是第二段注釋文字。      

在多列注釋中，多個星号要排成一條線。星号與内容之間同樣留一個半角空格。

推薦的寫法：

/**
 * 這裡是一段注釋文字。
 * 這是第二段注釋文字。
 */      

不推薦的寫法：

/**
*這裡是一段注釋文字。
*這是第二段注釋文字。
*/      

在文檔注釋中，除了要按照多列注釋的寫法以外，還要用辨別符來說明文檔中的某一部分，辨別符後的冒号右側與說明文字之間留一個半角空格。

推薦的寫法：

/**


* @name: 檔案名；


* @description: 描述文字；


* @author: 張三、李四；


* @update: 2018年12月19日。


*/      

不推薦的寫法：

/**


* @name:檔案名；


* @description:描述文字；


* @author:張三、李四；


* @update:2018年12月19日。


*/      

8、将标準屬性置于底部

有些屬性在部分浏覽器中尚未完全标準化，每家浏覽器開發商對這些屬性的實作效果或許并不統一，是以目前需要在開頭加入浏覽器廠商的專有字元串。是以同一個屬性需要寫多次，但有一條需要注意：将不帶前置标記的屬性置于最下方。

推薦的寫法：

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
    transition: opacity 3s;
}      

不推薦的寫法：

.test-selector-9
{
    opacity: 0;
    -webkit-transition: opacity 3s;
    transition: opacity 3s;
    -moz-transition: opacity 3s;
    -ms-transition: opacity 3s;
    -o-transition: opacity 3s;
}      

9、注意标點符号

每個屬性獨占一列。緊接樣式屬性的冒号，其後面要留一個半角空格。值以分号結尾。

推薦的寫法：

.test-selector-10
{
    opacity: .5;
}      

不推薦的寫法：

.test-selector-10
{
    opacity:.5
}      

10、樣式塊間留一空行

樣式選擇器及其樣式塊與周遭内容要保留一空行以避免内容過于擁擠，妨礙尋找。

推薦的寫法：

.test-selector-11
{
    opacity: 0.5;
}


.test-selector-12
{
    font-size: 16px;
}


.test-selector-13
{
    overflow: hidden;
}      

不推薦的寫法：

.test-selector-11
{
    opacity: 0.5;
}
.test-selector-12
{
    font-size: 16px;
}
.test-selector-13
{
    overflow: hidden;
}      

11、将過長的内容折為若幹列

同一屬性的值不止一個或值過長時，以逗号分割這些值，每個逗号後添加一個空格，過長的值可以另起一列。

推薦的寫法：

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0,
    linear-gradient(315deg, deeppink 25%, transparent 25%),
    linear-gradient(45deg, deeppink 25%, transparent 25%);
}      

不推薦的寫法：

.test-selector-14
{
    linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%);
}      

12、避開CSS Hack

所謂“CSS Hack”，就是在樣式表中加入少許特殊符号，讓能夠辨識不同符号的浏覽器在同一個元素上計算出來的樣式各不相同。出現CSS Hack的原因就在于老式的浏覽器（諸如飽受诟病的Internet Explorer 6）對同一套樣式表的計算結果與其它浏覽器的并不相同，這就很有可能會造成版式上的錯亂。

是以在過去，我們通常要針對個别怪異的浏覽器撰寫有針對性的CSS。

如width: 300px; _width: 200px;對其它浏覽器來說，該選擇器的寬度值應為300個像素，但IE 6能夠辨識出底線，是以它計算出的寬度就是200個像素。

13、減少使用影響性能的屬性

樣式表中不要含有過多的濾鏡表達式和repeat關鍵字等，這些屬性會降低網頁的渲染性能。若要重複背景圖檔，那麼原圖的寬高各不小于8px。