css的书写规范，有哪些注意点

一、框架为先，细节次之。

先写一些浮动，然后高与宽，然后再是细节方面的书写。

比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的 网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的，写在后面。

.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}

二、有因才有果。 比如想使用”图片替换文字“技术，通常要使用的text-indent。

如果我们使用标签的是 span：<span>这个文字将被图片替换</span>，那么正确写法： .thepic{display:block;text-indent:-9999em;}

注意块级元素与border之间的结合使用。

1.位置属性(position, top, right, z-index, display, float等)

2.大小(width, height, padding, margin)

3.文字系列(font, line-height, letter-spacing, color- text-align等)

4.背景(background, border等)

5.其他(animation, transition等)

三、CSS书写规范

• 模块注释

  /*区域模块-1    分模块的写上注释 */
  .classname, .ued{
      background:#f60 url(xxx/orange.png) no-repeat 0 0;
  }
  .ued>ul li>a{
       font-size:10px;
  }
  
  /*区域模块-2 分模块的写上注释  */
  .classname{
      width:950px;
      margin:0 auto;
  }
  

• 避免内联样式

• 避免使用低效选择器，参考这里

• 不要随意使用id

  id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。

• 使用有效的CSS, 除非是bugs处理或专属语法（浏览器私有前缀）

• 使用短ID或类命名，但确保他们不要太过隐晦，或直白（如#blue-button）

• 大型项目使用前缀，如#xyz-help, .xyz-column

• 选择器尽可能简单，如#example，而不是ul #example

• 使用缩写

  // 反对
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  
  border:1px solid #ccc      // 赞 
  
  color :#99ccff;  //  反对
  color :#9cf;     //  赞
  

• url()中不使用引号，0后面不跟单位

  margin: 0px auto; // 反对

  margin :0 auto // 赞

• 去掉小数点 0

  opacity : 0.8;  // 反对
  opacity : .8;   // 赞
  

• 每个声明最后都要有分号（即使是最后一个）

• 避免浏览器hacks

• 浏览器前浏览器私有写法在前，标准写法在后。

  -moz-box-shadow: 1px 2px 3px #ddd;
  -webkit-box-shadow: 1px 2px 3px #ddd;
  box-shadow: 1px 2px 3px #ddd;
  

• 注释

  根据需要解释代码，这个就不多说了，团队开发这个非常重要，尽管很多时候大家不愿意遵守，但确实重要！！！

CSS样式表文件命名

• 主要的 master.css
• 模块 module.css
• 基本共用 base.css
• 布局、版面 layout.css
• 主题 themes.css
• 专栏 columns.css
• 文字 font.css
• 表单 forms.css
• 补丁 mend.css
• 打印 print.css