CSS 代碼規(guī)范

編碼規(guī)范

CSS樣式表是一個序列通用字符集，傳輸和存儲過程中，這些字符必須由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符編碼方式編譯

文檔內(nèi)嵌樣式表編碼

When a style sheet is embedded in another document, such as in the STYLE element or “style” attribute of HTML, the style sheet shares the character encoding of the whole document.

當(dāng)樣式出現(xiàn)在其它文檔，如 HTML 的 STYLE 標(biāo)簽或標(biāo)簽屬性 “style”，樣式的編碼由文檔的決定。

文檔外鏈樣式表編碼

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet’s character encoding (from highest priority to lowest):

An HTTP “charset” parameter in a “Content-Type” field (or similar parameters in other protocols)BOM and/or @charsetor other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8

文檔外鏈樣式表的編碼可以由以下各項按照由高到低的優(yōu)先級順序決定：

1. HTTP “Content-Type” 字段參數(shù) “charset”（或其它協(xié)議相似的參數(shù)）
2. BOM（byte-order mark）和（或）@charset
3. Link 中的元數(shù)據(jù)設(shè)置（如果有的話）
4. 引用樣式表字符集或文檔編碼（如果有的話）
5. 假定為 UTF-8 編碼

樣式表編碼

Authors using an @charset rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the @charset rule.)

@charset must be written literally, i.e., the 10 characters ‘@charset “‘ (lowercase, no backslash escapes), followed by the encoding name, followed by ‘“;’.

• @charset規(guī)則一定要在樣式文件的第一行首個字符位置開始，否則的話就會有機會讓 BOM 設(shè)置生效（如果有設(shè)置 BOM 的話）而優(yōu)于 @charset 作為樣式表的編碼
• @charset ""; 一定要寫上，并且用小寫字母，不能出現(xiàn)轉(zhuǎn)義符

團隊約定

• 樣式文件必須寫上 @charset 規(guī)則，并且一定要在樣式文件的第一行首個字符位置開始寫，編碼名用 “UTF-8”
• 字符 @charset “”; 都用小寫字母，不能出現(xiàn)轉(zhuǎn)義符，編碼名允許大小混寫
• 考慮到在使用“UTF-8”編碼情況下 BOM 對代碼的污染和編碼顯示的問題，在可控范圍下，堅決不使用 BOM。（更多關(guān)于 BOM 可參考 BOM的介紹 和 「帶 BOM 的 UTF-8」和「無 BOM 的 UTF-8」有什么區(qū)別？ ）

推薦：

@charset "UTF-8";
?
.jdc{}

不推薦：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset規(guī)則不在文件首行首個字符開始 */
@charset "UTF-8";
?
.jdc{}
@CHARSET "UTF-8";
/* @charset規(guī)則沒有用小寫 */
?
.jdc{}
/* 無@charset規(guī)則 */
.jdc{}

更多關(guān)于樣式編碼：CSS style sheet representation

代碼風(fēng)格

代碼格式化

樣式書寫一般有兩種：一種是緊湊格式 (Compact)

.jdc{ display: block;width: 50px;}

一種是展開格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

團隊約定

統(tǒng)一使用展開格式書寫樣式

代碼大小寫

樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫字母書寫，屬性字符串允許使用大小寫。

/* 推薦 */
.jdc{
    display:block;
}
    
/* 不推薦 */
.JDC{
    DISPLAY:BLOCK;
}

選擇器

• 盡量少用通用選擇器 *
• 不使用 ID 選擇器
• 不使用無具體語義定義的標(biāo)簽選擇器

/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}
?
/* 不推薦 */
*{}
#jdc {}
.jdc div{}

代碼縮進

統(tǒng)一使用四個空格進行代碼縮進，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）

.jdc {
    width: 100%;
    height: 100%;
}

分號

每個屬性聲明末尾都要加分號；

.jdc {
    width: 100%;
    height: 100%;
}

代碼易讀性

左括號與類名之間一個空格，冒號與屬性值之間一個空格

推薦：

.jdc { 
    width: 100%; 
}

不推薦：

.jdc{ 
    width:100%;
}

逗號分隔的取值，逗號之后一個空格

推薦：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推薦：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

為單個 css 選擇器或新申明開啟新行

推薦：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推薦：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

顏色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要帶有不必要的 0

推薦：

.jdc {
    color: rgba(255,255,255,.5);
}

不推薦：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

屬性值十六進制數(shù)值能用簡寫的盡量用簡寫

推薦：

.jdc {
    color: #fff;
}

不推薦：

.jdc {
    color: #ffffff;
}

不要為 0 指明單位

推薦：

.jdc {
    margin: 0 10px;
}

不推薦：

.jdc {
    margin: 0px 10px;
}

屬性值引號

css 屬性值需要用到引號時，統(tǒng)一使用單引號

/* 推薦 */
.jdc { 
	font-family: 'Hiragino Sans GB';
}

/* 不推薦 */
.jdc { 
	font-family: "Hiragino Sans GB";
}

屬性書寫順序

建議遵循以下順序：

1. 布局定位屬性：display / position / float / clear / visibility / overflow
2. 自身屬性：width / height / margin / padding / border / background
3. 文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方屬性順序推薦

CSS3瀏覽器私有前綴寫法

CSS3 瀏覽器私有前綴在前，標(biāo)準(zhǔn)前綴在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多關(guān)于瀏覽器私有前輟寫法：#Vendor-specific extensions