css編碼規範

1、css文檔統籌：

2、規則組織：

 

一、規則組織的兩種方案：

1.一、從上到下的模塊化佈局 ：

　　先 元素基本屬性 後 ID佈局屬性 最後 公共類。

1.二、分塊詳細定義佈局：

　　先 元素基本屬性 後 佈局整體結構 最後 分塊詳細定義。

二、良好的規則組織習慣：

　　先 定義 元素基本屬性 或 元素默認屬性;

　　後 定義 ID樣式，通常多指佈局屬性定義;

　　最後 class定義的公共屬性。

3、屬性組織：

　　按主次關係組織步驟：

1. 先 聲明佈局屬性（肯定元素的顯示），如：display、float等;
2. 再 聲明盒模型屬性（肯定元素的形狀），如：width、height等;
3. 最後 聲明版式屬性（肯定元素內容顯示），如：color、font等.

4、css命名藝術

• 經典命名三法：

匈牙利命名法：

常應用於：windows編程環境中。

提出人：Microsoft程序員查爾斯 ^. 西蒙尼（Charles Simonyi）.

用法：經過變量名前面加上小寫字母的符號作爲前綴，標識出變量的做用域、類型等，前綴後面是一個或多個單詞組合，該單詞描述變量的用途

舉例：

hwnd：h是類型描述，表示句柄。 wnd是變量對象描述，表示窗口，所以hwnd表示爲窗口句柄。

pfnEatApple： pfn是類型描述， 表示指向函數的指針。 EatApple是變量對象描述，所以pfnEatApple函數的函數指針變量。

g_cch： g_是屬性描述，表示全局變量。 c和ch分別是計數類型和字符類型，一塊兒表示變量類型，這裏忽略了對象描述，所以它表示一個對字符進行計數的全局變量。

駱駝命名法：

常應用於：許多舊程序和UNIX環境以及C語言，現很流行這種命名方法。

用法：每個單詞的首字母爲大寫，名稱的首字母爲小寫，支持下劃線的使用。

舉例：

printLoadTemplate();

print_load_template();

帕斯卡命名法：

主要應用於：c#環境中。

用法：每個單詞的首字母爲大寫，名稱的首字母爲大寫。

舉例：

MyFunction();

• css命名規則：

　　　

css命名規則做用：直觀、簡潔、一目瞭然，方便後期維護和交流。

建議：

1. 用戶在命名時所有使用小寫字母，單詞首寫字母能夠除外。
2. 名稱以字母開頭，後面能夠鏈接數字、字母、下劃線、連字符和特殊字符。但建議儘可能使用英文字母，適時地使用下劃線和鏈接線。
3. css命名要詞必達意，名稱要反映用途和相關信息，同時也要簡短，不要附帶任何冗餘信息。

例如：myleftmenu120px就能夠簡寫爲leftMenu.

舉例：

合法命名：

style.css

topMenu

hot_view

非法命名：

263_color

-my-site

• css命名方法：

1. 語義化命名：
   • 使用位置定義詞彙：使用能夠描述元素所在位置的語義詞彙來對其命名， 例如： id="left-side" id="center-column" id="right-column"; 缺點：缺少擴展性
   • 使用樣式定義詞彙：根據類被定義的樣式來歸納描述命名，
     • 使用顏色名稱或十六進制代碼命名顏色類，如：.blue{color:blue;} .f00{color:#f00;} .abc123{ color:#abc123;}
     • 使用「font+字體大小」組合方法命名字體大小類，如：.font12px{font-size:12px;} .font9pt{font-size:9pt;}
     • 使用英文名稱命名類， 如：.left{float:left;} .bottom{float:bottom;}
2. 結構化命名：通常根據文檔結構而不是樣式或位置的描述來命名，可實現css聲明名稱的重用，從而高效利用不一樣的樣式，例如：id = "main_nav" id="sub_nav" id="main-content"。
3. 語義化命名和結構化命名的優缺點：

語義化命名：

優勢：注重元素位置的描述性

缺點：沒有涉及文檔結構，所以樣式與文檔結構脫節，用戶會遇到該名稱定義的樣式而不知所適用的對象。缺少擴展性。

結構化命名：

優勢：相對於語義化命名而言，更具備擴展性和重用性。

• 代碼註釋：

目的：輔助閱讀，加強可讀性和解決部分預防Bug。

語法：以「/*」符號開頭，以「*/」符號結尾。

原則：模塊代碼（代碼段）最好添加註釋性說明，並佔據一行，每條規則適當點撥，關鍵屬性或補丁聲明必須提示。

注意：

1. 在代碼段前面添加模塊功能說明，代碼段能夠包含一個或多個樣式。
2. 在每一個聲明後增長屬性說明或提示，有時爲了兼容而定義的hack代碼，就應在屬性後提示一下，方便閱讀。
3. 若是樣式表文件格式是每一個規則單行書寫，能夠省略屬性說明和樣式簡介，直接添加模塊註釋。

• 清除註釋：

1. 手工逐行刪除。
2. 使用代碼編輯器進行清除。
3. 使用在線優化工具：CSS Cascading Style Optimiser (http://www.codebeautifier.com/)。