这个博客已经过去了很久……

不过,你可以通过以下方式找到我

现在的位置: 首页 > 谈前端 > CSS > 正文
CSS 编码规范
2013年12月30日 CSS ⁄ 共 2553字 等你评论

css 校验

除了 css hack 和浏览器私有属性, 推荐使用 w3c css validator 校验其余的代码.

代码规范

一般性命名

使用小写字母,复合词以 - 分隔; 例如 nav.css , login-nav.css , login-page

id 和类的命名

为 id 和样式类使用有意义或通用的名字,避免由于 css 命名更改引起的不必要的文档或模板改变;例如

  1. /* 不推荐: 无意义 */  
  2. #yee-1901 {}  
  3.   
  4. /* 不推荐: 表现层的命名 */  
  5. .button-green {}  

 

  1. /* 推荐: 具体 */  
  2. #gallery {}  
  3. #login {}  
  4. .video {}  
  5.   
  6. /* 推荐: 通用 */  
  7. .effect {}  
  8. .alt {}  

id 和 class 的命名长度应该适中,不要太简略也不要太详细;例如

  1. /* 不推荐 */  
  2. #navigation {}  
  3. .atr {}  
  4. /* 推荐 */  
  5. #nav {}  
  6. .author {}  

元素选择器

为了 性能原因 , 请避免元素选择器和类选择器以及 id 选择器混用;例如

  1. /* 不推荐 */  
  2. ul#example {}  
  3. div.error {}  
  4. /* 推荐 */  
  5. #example {}  
  6. .error {}  

 

简写属性名字

为了提高可读性,尽可能的使用简写属性。例如

  1. /* 不推荐 */  
  2. border-top-style: none;  
  3. font-family: palatino, georgia, serif;  
  4. font-size: 100%;  
  5. line-height: 1.6;  
  6. padding-bottom: 2em;  
  7. padding-left: 1em;  
  8. padding-right: 1em;  
  9. padding-top: 0;  
  10. /* 推荐 */  
  11. border-top: 0;  
  12. font: 100%/1.6 palatino, georgia, serif;  
  13. padding: 0 1em 2em;  

 

0 和单位

对属性值为 0 的情况省略单位;例如

  1. margin: 0;  
  2. padding: 0;  

 

0 前缀情况

省略属性值中的 0 前缀;例如

  1. font-size: .8em;  

 

16 进制的颜色值表示

尽可能使用 3 个字符的 16 进制颜色值;例如

  1. /* 不推荐 */  
  2. color#eebbcc;  
  3. /* 推荐 */  
  4. color#ebc;  

 

前缀

为了防止冲突,对于应用特定的样式附加应用前缀;例如

  1. .login-help {} /* login page */  
  2. #detail-note {} /* detail page */  

 

hacks

避免 css hack , 考虑使用特定浏览器前缀表示;例如

  1. .ks-ie6 p {  
  2.     margin: 1em 0;  
  3. }  

 

格式规范

属性声明顺序

按照字母顺序声明属性,排序时忽略私有的浏览器前缀,对于特定的浏览器,私有的浏览器前缀应该参与排序;例如

  1. backgroundfuchsia;  
  2. border1px solid;  
  3. -moz-border-radius: 4px;  
  4. -webkit-border-radius: 4px;  
  5. border-radius: 4px;  
  6. colorblack;  
  7. text-aligncenter;  
  8. text-indent: 2em;  

 

块缩进

块的内容应该被缩进;例如

  1. @media screenprojection {  
  2.   
  3.   html {  
  4.     background#fff;  
  5.     color#444;  
  6.   }  
  7.   
  8. }  

 

分号

使用分号结束单个属性的定义;例如

  1. /* 不推荐 */  
  2. .test {  
  3.   displayblock;  
  4.   height100px  
  5. }  
  6. /* 推荐 */  
  7. .test {  
  8.   displayblock;  
  9.   height100px;  
  10. }  

 

空格

在属性名冒号后加一个空格,例如

  1. /* 不推荐 */  
  2. .test {  
  3.   display:block;  
  4. }  
  5. /* 推荐 */  
  6. .test {  
  7.   displayblock;  
  8. }  

 

空行

多个选择以及声明间以行分隔;例如

  1. /* 不推荐 */  
  2. a:focus, a:active {  
  3.   positionrelativetop1px;  
  4. }  
  5. /* 推荐 */  
  6. h1,  
  7. h2,  
  8. h3 {  
  9.   font-weightnormal;  
  10.   line-height: 1.2;  
  11. }  

多个 css 规则间以空行分隔;例如

  1. html {  
  2.   background#fff;  
  3. }  
  4.   
  5. body {  
  6.   marginauto;  
  7.   width: 50%;  
  8. }  

 

引号

尽可能的不用引号,迫不得已时使用单引号.

  1. /* 不推荐 */  
  2. @import url("//www.google.com/css/maia.css");  
  3.   
  4. html {  
  5.   font-family"open sans"arialsans-serif;  
  6. }  
  7. /* 推荐 */  
  8. @import url(//www.google.com/css/maia.css);  
  9.   
  10. html {  
  11.   font-family: 'open sans', arialsans-serif;  
  12. }  

 

注释

成组的 css 规则间用块状注释和空行分离;例如

  1. /* Header */  
  2.   
  3. #login-header {}  
  4.   
  5. #login-header-below {}  
  6.   
  7. /* Footer */  
  8.   
  9. #login-footer {}  
  10.   
  11. #login-footer-below {}  
  12.   
  13. /* Gallery */  
  14.   
  15. .login-gallery {}  
  16.   
  17. .login-gallery-other {}  

 

参考文档

http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

友荐云推荐
×