• 为了欺骗W3C的验证工具,可将代码分为两个文件，一个是针对所有浏览器,一个只针对IE。即将所有符合W3C的代码写到一个文件中,而一些IE中必须而又不能通过W3C验证的代码（如:cursor:hand;）放到另一个文件中，再用下面的方法导入。
  1. <!-- 放置所有浏览器样式-->
  2.     <link rel="stylesheet" type="text/css" href="">
  3.     <!-- 只放置IE必须，而不能通过w3c的-->
  4.     <!--[if IE]
  5.         <link rel="stylesheet" href="">
  6.     <![endif]-->

CSS样式新建或修改尽量遵循以下原则

  1. 根据新建样式的适用范围分为三级：全站级、产品级、页面级。
  2. 尽量通过继承和层叠重用已有样式。
  3. 不要轻易改动全站级CSS。改动后，要经过全面测试。

CSS属性显示顺序

  1. 显示属性
  2. 元素位置
  3. 元素属性
  4. 元素内容属性

CSS书写顺序

  1. .header {
  2.     /* 显示属性 */
  3.         display || visibility
  4.         list-style
  5.         position top || right || bottom || left
  6.         z-index
  7.         clear
  8.         float
  9.     /* 自身属性 */
  10.         width max-width || min-width
  11.         height max-height || min-height
  12.         overflow || clip
  13.         margin
  14.         padding
  15.         outline
  16.         border
  17.         background
  18.     /* 文本属性 */
  19.         color
  20.         font
  21.         text-overflow
  22.         text-align
  23.         text-indent
  24.         line-height
  25.         white-space
  26.         vertical-align
  27.         cursor
  28.         content
  29.     };
  1. 兼容多个浏览器时，将标准属性写在底部。

CSS兼容多个浏览器时，将标准属性写在底部

  1. -moz-border-radius: 15px; /* Firefox */
  2. -webkit-border-radius: 15px; /* Safari和Chrome */
  3. -o-border-radius: 15px; 
  4. border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 *//标准属性

CSS书写顺序

  1. 多选择器规则之间换行，即当样式针对多个选择器时每个选择器占一行。(初始化css除外）
  1. button.btn,
  2. input.btn,
  3. input[type="button"] {…};

CSS选择器

  • 使用z-index属性尽量z-index的值不要超过150（通用组的除外），页面中的元素内容的z-index不能超过10（提示框等模块除外但维持在150以下），不允许直接使用（999~9999）之间大值。
  • 尽量避免使用CSS Hack。
  1. property:value; /* 所有浏览器 */
  2. +property:value; /* IE7 */
  3. _property:value; /* IE6 */
  4. *property:value; /* IE6/7 */
  5. property:value\9; /* IE6/7/8/9，即所有IE浏览器 */
  1. * html selector { … }; /* IE6 */
  2. *:first-child+html selector { … }; /* IE7 */
  3. html>body selector { … }; /* 非IE6 */
  4. @-moz-document url-prefix() { … }; /* firefox */
  5. @media all and (-webkit-min-device-pixel-ratio:0) { … }; /* saf3+/chrome1+ */
  6. @media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0) { … }; /* opera */
  7. @media screen and (max-device-width: 480px) { … }; /* iPhone/mobile webkit */
  1. 避免使用低效的选择器。
  1. body > * {…};
  2. ul > li > a {…};
  3. #footer > h3 {…};
  4. ul#top_blue_nav {…};
  5. searbar span.submit a { … }; /* 反面示例 */
  • 六个不要三个避免一个使用。
  1. 不要在标签上直接写样式
  2. 不要在CSS中使用expression
  3. 不要在CSS中使用@import
  4. 不要在CSS中使用!important
  5. 不要在CSS中使用“*”选择符
  6. 不要将CSS样式写为单行
  7. 避免使用filter
  8. 避免使用行内（inline）样式
  9. 避免使用“*”设置{margin: 0; padding: 0;}
  10. 使用after或overflow的方式清浮动
  • 减少使用影响性能的属性。
  1. position:absolute;
  2. float:left;//如这些定位或浮动属性
  1. 减少在`CSS`中使用滤镜表达式和图片repeat,
  2. 尤其在body当中,渲染性能极差, 如果需要用repeat的话,
  3. 图片的宽或高不能少于8px。

使用CSS缩写属性

对于 background, font, padding, margin 这些简写形式的属性声明，可以缩写的尽量缩写，这样既精简代码又提高用户的阅读体验

  1. .box {
  2.   width: 100px;
  3.   height: 100px;
  4.   margin: 0 10px 20px 30px;
  5.   font: italic bold 12px/30px arial,sans-serif;
  6. }

小数点和单位

值在 -1 和 1 之间时去掉小数点前的 “0”，如果属性值为数字 0，不加任何单位；

  1. .box {
  2.   width: 100px;
  3.   height: 100px;
  4.   margin: 0 10px 20px 0;
  5.   opacity: .5;
  6. }

颜色值十六进制表示法

6 个字符的十六进制表示法，并始终使用小写的十六进制数字；16进制表示法与rgb表示法混用的情况，优先使用 16 进制表示法

  1. .box {
  2.   color: #cccccc;
  3.   background-color: #efefef;
  4. }

引号

属性选择器或属性值用双引号 “” 括起来，而 URI 值 url() 不要使用任何引号

  1. .box {
  2.   font-family: "open sans", arial, sans-serif;
  3.   background-image: url(http://taobao.com/);
  4. }