總體原則
符合w3c通用網頁標準。
結構清晰，嵌套正確，嵌套深度適當。
代碼精煉。
注釋清晰，代碼可讀性高。
風格統一。
1.1 基本命名風格
本文檔的命名規范會僅使用以下命名風格。
Camel風格這種風格除了第一個單詞的首字母,其他單詞都應大寫首字母。Ex: backColor
1.2 大小寫敏感
不要出現兩個只用大小寫區分的Class。不要出現兩個只用大小寫區分的ID。Naming Conventions and Style（命名規范和代碼風格）
1.3 所有的Class及ID均采用 Pascal 風格
<!-- Good Example -->
<p class=”sidebar”></p>
<div id=”container”></div>
<!--Not Good Example -->
<p class=”boxA”></p>
<div id=”boxB”></p>
1.5 所有的樣式控制盡量使用Class，ID用于Javascript對DOM結構的控制
可以防止因優先級的問題導致CSS代碼量加大同一個Class可應用于多個標簽，但同一個ID只能用于一個標簽1.6 所有CSS代碼盡量單獨封裝在獨立的CSS文件中，文件命名應用有意義的名字，例如layout.css編寫頁面布局方面的CSS代碼。
盡量不要出現直接在HTML標簽中書寫CSS代碼的情況。在<head>標簽中可使用<style></style>針對本頁面中特定元素的樣式控制代碼1.7 CSS代碼每行一個屬性
每行一個屬性的代碼風格更利于維護，注釋更方便在使用Hack進行瀏覽器兼容性處理時更清晰/* Example */
.mainNav {
width: 200px;
height: 200px;
background: #f00 url(bg.jpg) no-repeat left top; /* 背景顏色及背景圖片 */
}
1.8 CSS代碼中應遵循從外到內，從上到下，從左到右的原則
先寫外圍框架的，再寫內部元素的。先寫網頁中視覺上出現在頁面上面的元素CSS代碼，再寫下面的。先寫網頁中視覺上出現在頁面左邊的元素CSS代碼，再寫右邊的。<!-- Example -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
.header {
}
.container {
}
.container .sidebar {
}
.container .main {
}
.footer {
}
</style>
</head>
<body>
<div class=”header”>頭部</header>
<div class=”container”>
<div class=”sidebar”>側邊欄</div>
<div class=”main”>主體區域</div>
</div>
<div class=”footer”>底部</div>
</body>
</html>
1.9 代碼縮寫
對于padding，margin，border等屬性應采用縮寫方式
1.10 所有CSS代碼盡量單獨封裝在獨立的CSS文件中，文件命名應用有意義的名字，例如layout.css編寫頁面布局方面的CSS代碼。
在文件開始處給出適當的注釋/* -------
文件名：layout.css
作用：頁面主體布局
創建者：
創建日期：
最后更新：
最后更新時間：
------- */
/* Good Example */
/* Header */
.header {
width: 200px;
min-height: 100px; /* 針對IE7中設置最小高度 */
}
1.13 選擇器與開始大括號({)之間應保持而且僅有一個空格
1.14 結束大括號(｝)應該放在單獨的一行。
1.15 用一到兩個空行來分割不同的頁面模塊CSS代碼段
/* Good Example */
.header {
width: 200px;
height: 100px;
}
.header .mainNav {
margin: 5px 2px;
}
.container {
}
.container .sidebar {
}
.container .main{
}
.footer {
}
/* Not Good Example */
.header {
width: 200px;
height: 100px;
}
.header .mainNav {
margin: 5px 2px;
}
.container {
}
.container .sidebar {
}
.container .main{
}
.footer {
}
/* Good Example */
/* 主導航條 */
.mainNav {
}
/* 側邊欄菜單 */
.sideMenu {
}
/* Not Good Example */
.Menu1 {
}
.Menu2 {
}
1.18 選擇正確的標簽
不要一味的追求和使用DIV標簽不要完全拋棄Table標簽，在需要對數據進行排列顯示時，Table是首選要在恰當的地方正確使用<dl>標簽，而不要用冗繁的div、p等代替合理安排<h1>到<h6>標簽，有利于SEO，一個網頁中不要出現超過2個<h1>盡量不再使用<font>標簽1.19 同一標簽嵌套深度盡量不要超過三層
比較常見的錯誤時使用嵌套超過三層的DIV標簽，應用其他可代替的標簽進行編寫1.20 不要使用多余的代碼
在保證達到效果的同時，代碼應越少越好。/* Good Example */
span {
float: left;
}
/* Not Good Example */
span {
float: left;
display: block;
}
/* 雖然span本身為inline元素，但經過float:left后已經自動轉為了block元素，所以無需添加display:block */
1.21 及時清除浮動并注意方法
在對元素進行浮動后，應及時清除浮動。如果采用空標簽清除浮動法，空標簽應緊跟浮動元素之后，而不是浮動元素的父元素之后。1.22 將常用的class放在一個單獨的文件中
將常用的浮動、清除浮動、字體顏色等class單獨寫在一個公用文件中，可取名common.cssOthers（其它）
1.23 關于CSS排錯
當出現CSS錯誤時，建議給出錯的標簽設置背景顏色或邊框，以便更快的找出錯誤并更正。CSS排錯方法應首先檢查HTML代碼中的class屬性與CSS代碼中的選擇器是否一致，避免因漏寫字母或錯寫字母而出錯。出現錯位時應首先考慮是否掉入了IE6的各種“CSS陷阱”中，例如Double Margin。新聞熱點
疑難解答
