全面总结CSS代码的编写规范及优化建议

结构、样式、行为分离
尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进
统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码
使用不带 BOM 的 UTF-8 编码。

在 HTML 中指定编码<meta charset="utf-8">；
无需使用@charset 指定样式表的编码，它默认为 UTF-8；
一律使用小写字母

CSS Code复制内容到剪贴板

<!– Recommended –>   
<img src="google.png" alt="Google">   
  
<!– Not recommended –>   
<A HREF="/">Home</A>   
/* Recommended */  
color: #e5e5e5;   
  
/* Not recommended */  
color: #E5E5E5;  

省略外链资源 URL 协议部分
省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免 Mixed Content 问题，减小文件字节数。

其它协议（ftp 等）的 URL 不省略。

CSS Code复制内容到剪贴板

<!– Recommended –>   
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>   
  
<!– Not recommended –>   
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>   
/* Recommended */  
.example {   
  background: url(//www.google.com/images/example);   
}   
  
/* Not recommended */  
.example {   
  background: url(http://www.google.com/images/example);   
}  

CSS 注释

组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；

CSS Code复制内容到剪贴板

/* ==========================================================================  
   组件块  
 ============================================================================ */  
  
/* 子组件块  
 ============================================================================ */  
.selector {   
  padding: 15px;   
  margin-bottom: 15px;   
}   
  
/* 子组件块  
 ============================================================================ */