前端HTML/CSS书写规范

jopen 10年前

收集来自google、推ter、 腾讯、 淘宝等互联网公司对前端 HTML 、CSS 、 Javascript 等一些规范。总结于下，有部分删减。希望大家在书写规范上起到一定作用。

前端HTML/CSS书写规范

为何规范？**

  • 规范不是一种约束，而是一种约定，强调团队的一致性
  • 加强团队的合作性，提高协作效率
  • 形成一种团队文化，积累知识
  • 规范最终是为项目服务的，我们所做的一切都是为了优化项目和流程提高我们的工作效率

最近收集来自google、推ter、 腾讯、 淘宝等互联网公司对前端 HTML 、CSS 、 Javascript 等一些规范。总结于下，有部分删减。希望大家在书写规范上起到一定作用。规范没有绝对，有不足之处敬请补充！**

HTML 规范

  • 分离的标记、样式和脚本

    结构、表现、行为分离

  • 在可能情况下验证你的标记

    使用编辑器验证你的标记是否正确，一般编辑器都自带有这个功能。

  • 技术不支持的时候使用备胎，如canvas

  • 编码格式：使用UTF-8

  • 语义性

    对于HTML5而言，例如header、footer、nav、section等跟div能实现的功能基本类似，但是语义性上有着天壤之别。

  • TODO待定项

    尚未实现的或待定的内容一定要标识强调出来，利用TODO辨识，而非其他诸如@@来强调。
    在todo项中如果有必要列明联系人，比如负责人。在TODO后追加一个冒号作为行动内容，例 如 TODO:增加HTML5模板

  • 多媒体后备：为多媒体提供备选内容

    典型就是为img添加alt内容。

  • HTML 的模块化

    <div id="module-1" class="module">        <h3>TITLE</h3>          <p class="module-item">       some text           </p>  </div> <!-- #module .module  end -->`

CSS 规范

一、CSS文件

  • 注释

    /*  @name:  文件的名称  @description: 简要的描述这个css 文件功能  @require: 依赖文件，没有就不用写  @author: 作者  最好附带联系方式(邮箱)  */

  • 文件编码级

    编码必须使用utf-8（无BOM）

二、 CSS书写顺序

不去完全按照某个书写顺序来写。但我们应该养成良好的习惯，让看代码的人更易理解。易读对于团队协作来说是非常重要的：**

1. 框架为先，细节次之。  比如写一个浮动容器的样式，我们应该先让这个容器的框架被渲染出来，让大家看到基本的    网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding     之类的，写在后面。      .selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}  2.有因才有果。  比如想使用”图片替换文字“技术，通常要使用的text-indent。如果我们使用标签的是    span：<span>这个文字将被图片替换</span>，那么正确写法：    .thepic{display:block;text-indent:-9999em;}  我们应该是先将 span 变成”块级元素“，再将文字 indent。而不是先 indent 再变成块级 的。  又如我们，如果想让一个 span 使用 margin, 那么我们应该这样写：    span{display:block;margin-bottom:10px;}  而非margin-bottom先行，因为没有 display 之前，行内元素是没有 margin 的。
  • 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:1px solid #ccc      //   反对  // 赞  border-width: 1px;  border-style: solid;  border-color: #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

来自：http://my.oschina.net/frontendinfo/blog/184995