前端开发规范

通用

• 用2个空格缩进

• 文件、目录名全部小写，单词之间用”_”隔开

• 文件统一采用UTF-8编码

• 删除行位多余的空格

HTML

• 标签合理化，对于兼容性要求不高的可使用HTML5的语义化标签，如header、footer、article、section等

• 标签合理嵌套，越短越好，dom层级尽量简单

• 尽量使用class，少用id

• class、id命名形象化，一律采用小写，单词之间”-“隔开，不允许使用大写字母和”_”

• 自定义的属性以”data-“开头

• 属性编写顺序：

  • class
  • id,name
  • data-*
  • src,for,type,href,value
  • title,alt
  • role,aria-*

• meta IE 兼容模式<meta http-equiv="X-UA-Compatible" content="IE=Edge">

CSS

• 不要使用@import，这种指令要慢很多，会增加请求次数，多使用link或使用sass等预处理器
• 用两个空格代替tab，保证能在所有环境下展现一致
• 少使用浮动、定位等布局
• 尽量减少选择器的层级
• CSS左括号与选择器同行，右括号另起一行，左花括号前空一格
• CSS选择器尽量用用class，少使用标签，如p{}、.test p{}等
• 不要在rgb()、rgba()值内部的括号中的逗号后面插入空格
• 对于属性值和颜色知，省略小于1的小数前面的0，如.5代替0.5，-.5px代替-0.5px
• 十六进制应该全部小写，且尽量使用简写形式，例如#fff
• 避免给0值指定单位
• 为选择器的属性添加双引号，如input[type="text"]
• 选择器分组时，将单独的选择器单独放一行
• CSS样式一行只写一条，可读性高
• 媒体查询尽量放在相关规则的地方，否则容易遗忘

• 带前缀的属性，让每个属性在垂直方向对齐，便于阅读

  /* bad css */
  .selector, .selector-secondary, .selector[type=text] {
    padding:15px;
    margin:0px 0px 15px;
    background-color:rgba(0, 0, 0, 0.5);
    box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
  }

  /* good css */
  .selector,
  .selector-secondary,
  .selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
            box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
  }

JavaScript

• 变量名、函数名使用小驼峰，如requestFlag

• 类名使用大驼峰，如ClassData

• 常量名全面大写并用”_”分隔，jQuery变量使用$开头

• 在后端返回的数据list中增加前端字段，用”_”开头，区分前后端字段

• 少使用全局变量和全局函数

• 代码过多时考虑进行封装

• 语句以分号结束

• 避免使用多行注释/**/，多使用单行注释//

• 文件注释
  开发者信息能够体现开发人员对文件的贡献，这样便于team其他人员快速找到出处，便于后期维护

  /**
   * Created by Pimi.chen on 2017/04/30.
   */

• 如果是页面html、css由制作同学开发，js由交互同学开发，交互同学拿到页面后如需要在dom中补充class或id，以”JS-“开头，区分css和js所需类

IMG

• 格式：透明图片使用png，不透明的使用jpg

• 上线前必须使用tinypng进行压缩图片