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:value9; /* 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。

收集整理了这些开发规范，感谢所有的原作者。