1.文件命名

  • CSS模块文件，其文件名必须与模块名一致；

假定有这样一个模块：

  1. .wb-btn { sRules; }
  2. .wb-btn--primary { sRules; }
  3. .wb-btn--warn { sRules; }
  4. .wb-btn--danger { sRules; }

那么该模块的文件名应该为：wb-btn.css

  • CSS页面文件，其文件名必须与HTML文件名一致；

假定有一个HTML页面叫 product.html，那么其相对应的CSS页面文件名应该为：product.css

假定现在有一个 product.html，里面有2个模块：

  1. +<section class="wb-list">
  2. +<section class="wb-info">

那么开发人员能快速找到与该页面相关的3个直接CSS文件，包括：product.css, wb-list.css, wb-info.css

2.小写

  • 所有的HTML标签必须小写；

  • 所有的HTML属性必须小写；

  • 所有的样式名及规则必须小写。

3.注释

尽可能的为你的代码写上注释。解释为什么要这样写，它是新鲜的方案还是解决了什么问题。

4.待办事项

用 TODO 标示待办事项和正在开发的条目，方便查找未完成的工作，快速定位

  1. <!-- TODO: 图文混排 -->
  2. <div class="g-imgtext">
  3. <img src="1.png" alt="" />
  4. ...
  6. /* TODO: 图文混排 comm: g-imgtext */
  7. .g-imgtext { sRules; }

5.行尾空格

删除行尾空格，这些空格没有必要存在

6.省略嵌入式资源协议头

省略图像、媒体文件、样式表和脚本等URL协议头部声明 ( http: , https: )。如果不是这两个声明的URL则不省略。

省略协议声明，使URL成相对地址，防止内容混淆问题和导致小文件重复下载（这个主要是指http和https交杂的场景中）。

不推荐：

  1. <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

推荐：

  1. <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

不推荐：

  1. .example {
  2.   background: url(http://www.google.com/images/example);
  3. }

推荐：

  1. .example {
  2.   background: url(//www.google.com/images/example);
  3. }

注：省略协议头在IE7-8下会有一点小问题，外部CSS文件（link和@import）会被下载两遍，所以该条目的约定看具体项目。

7.代码有效性

代码验证不是最终目的，真的目的在于让开发者在经过多次的这种验证过程后，能够深刻理解到怎样的语法或写法是非标准和不推荐的，即使在某些场景下被迫要使用非标准写法，也可以做到心中有数。

8.图像约定

1.图像压缩

所有图片必须经过一定的压缩和优化才能发布

2.背景图

  • 使用PNG格式而不是GIF格式，因为PNG格式色彩更丰富，还能提供更好的压缩比；

  • 在需要兼容IE6的项目中，尽可能选择PNG8，而不是使用PNG24+滤镜。

3.前景图

  • 内容图片建议使用JPG，可以拥有更好地显示效果；

  • 装饰性图片使用PNG。

4.Sprite

  • CSS Sprite是一种将数个图片合成为一张大图的技术（既可以是背景图也可以是前景图），然后通过偏移来进行图像位置选取；

  • CSS Sprite可以减少http请求。

  • 现阶段建议优先使用字体图标的方式获取类似icon的图标