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

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

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

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

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

1. <!-- Recommended -->   
2. <img src="google.png" alt="Google">   
3.   
4. <!-- Not recommended -->   
5. <A HREF="/">Home</A>   
6. /* Recommended */  
7. color: #e5e5e5;   
8.   
9. /* Not recommended */  
10. color: #E5E5E5;  

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

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

1. <!-- Recommended -->   
2. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>   
3.   
4. <!-- Not recommended -->   
5. <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>   
6. /* Recommended */  
7. .example {   
8.   background: url(//www.google.com/images/example);   
9. }   
10.   
11. /* Not recommended */  
12. .example {   
13.   background: url(http://www.google.com/images/example);   
14. }  

CSS 注释

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

1. /* ==========================================================================  
2.    组件块  
3.  ============================================================================ */  
4.   
5. /* 子组件块  
6.  ============================================================================ */  
7. .selector {   
8.   padding: 15px;   
9.   margin-bottom: 15px;   
10. }   
11.   
12. /* 子组件块  
13.  ============================================================================ */  
14. .selector-secondary {   
15.   display: block; /* 注释*/  
16. }   
17.   
18. .selector-three {   
19.   display: span;   
20. }  

代码组织
以组件为单位组织代码段；
制定一致的注释规范；
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
如果使用了多个 CSS 文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；
良好的注释是非常重要的。请留出时间来描述组件（component）的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。

提示：通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

1. /* ==========================================================================  
2.    组件块  
3.  ============================================================================ */  
4.   
5. /* 子组件块  
6.  ============================================================================ */  
7. .selector {