css書寫規範

• 爲了欺騙W3C的驗證工具,可將代碼分爲兩個文件，一個是針對全部瀏覽器,一個只針對IE。即將全部符合W3C的代碼寫到一個文件中,而一些IE中必須而又不能經過W3C驗證的代碼（如:
  cursor:hand;）放到另外一個文件中，再用下面的方法導入。

<!-- 放置全部瀏覽器樣式-->
<link rel="stylesheet" type="text/css" href="">
<!-- 只放置IE必須，而不能經過w3c的-->
<!--[if IE]
    <link rel="stylesheet" href="">
<![endif]-->

• CSS樣式新建或修改儘可能遵循如下原則。

根據新建樣式的適用範圍分爲三級：全站級、產品級、頁面級。
儘可能經過繼承和層疊重用已有樣式。
不要輕易改動全站級CSS。改動後，要通過全面測試。

• CSS屬性顯示順序。

顯示屬性
元素位置
元素屬性
元素內容屬性

CSS書寫順序。

.header {
/* 顯示屬性 */
    display || visibility
    list-style
    position top || right || bottom || left
    z-index
    clear
    float
/* 自身屬性 */
    width max-width || min-width
    height max-height || min-height
    overflow || clip
    margin
    padding
    outline
    border
    background
/* 文本屬性 */
    color
    font
    text-overflow
    text-align
    text-indent
    line-height
    white-space
    vertical-align
    cursor
    content
    };

兼容多個瀏覽器時，將標準屬性寫在底部。

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari和Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 *//標準屬性

• 使用選擇器時，命名比較短的詞彙或者縮寫的不容許直接定義樣式。

.hd,.bd,.td{};//如這些命名

可用上級節點進行限定。

.recommend-mod .hd

多選擇器規則之間換行，即當樣式針對多個選擇器時每一個選擇器佔一行。

button.btn,
input.btn,
input[type="button"] {…};

優化CSS選擇器。

#header a { color: #444; };/*CSS選擇器是從右邊到左邊進行匹配*/

瀏覽器將檢查整個文檔中的全部連接和每一個連接的父元素，並遍歷文檔樹去查找ID爲header的祖先元素，若是找不到header將追溯到文檔的根節點，解決方法以下。

避免使用通配規則和相鄰兄弟選擇符、子選擇符,、後代選擇符、屬性選擇符等選擇器
不要限定id選擇符，如div#header（提權的除外）
不要限定類選擇器，如ul.recommend（提權的除外）
不要使用 ul li a 這樣長的選擇符
避免使用標籤子選擇符，如#header > li > a

• 使用z-index屬性儘可能z-index的值不要超過150（通用組的除外），頁面中的元素內容的z-index不能超過10（提示框等模塊除外但維持在150如下），不容許直接使用（999\~9999）之間大值。
• 儘可能避免使用CSS Hack。

property:value; /* 全部瀏覽器 */
+property:value; /* IE7 */
_property:value; /* IE6 */
*property:value; /* IE6/7 */
property:value\9; /* IE6/7/8/9，即全部IE瀏覽器 */

\* html selector { … }; /* IE6 */
\*:first-child+html selector { … }; /* IE7 */
html>body selector { … }; /* 非IE6 */
@-moz-document url-prefix() { … }; /* firefox */
@media all and (-webkit-min-device-pixel-ratio:0) { … }; /* saf3+/chrome1+ */
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }; /* opera */
@media screen and (max-device-width: 480px) { … }; /* iPhone/mobile webkit */

避免使用低效的選擇器。

body > * {…};
ul > li > a {…};
#footer > h3 {…};
ul#top_blue_nav {…};
#searbar span.submit a { … }; /* 反面示例 */

• 六個不要三個避免一個使用。

不要在標籤上直接寫樣式
不要在CSS中使用expression
不要在CSS中使用@import
不要在CSS中使用!important
不要在CSS中使用「*」選擇符
不要將CSS樣式寫爲單行
避免使用filter
避免使用行內（inline）樣式
避免使用「*」設置{margin: 0; padding: 0;}
使用after或overflow的方式清浮動

• 減小使用影響性能的屬性。

position:absolute;
float:left;//如這些定位或浮動屬性

減小在CSS中使用濾鏡表達式和圖片repeat,尤爲在body當中,渲染性能極差, 若是須要用repeat的話,圖片的寬或高不能少於8px。

收集整理了這些開發規範，感謝全部的原做者。