何如规范前端代码

  • 2016-11-04
  • 128
  • 0
  • 使用 4 个空格作为一个缩进层级。
  • classid 命名,必须单词全字母小写,单词间使用减号分割,如:modal-body
  • id 必须保证页面内唯一。
  • 标签名必须使用小写字母。
  • 对于无需自闭合的标签,不允许自闭合,如:
    • 属性名必须使用小写字母。
    • 属性值必须使用双引号包围。
    • 自定义属性使用 data- 开头。
    • 设置页面使用 utf-8 编码:<meta charset="UTF-8">
    • HTML 文件使用无 BOMUTF-8 编码。
    • 引入 CSS 无需指明 type 属性,示例:<link rel="stylesheet" href="page.css">
    • 引入 JavaScript 无需指明 type 属性,示例:<script src="init-behavior.js"></script>
    • 禁止 imgsrc 取值为空,这会导致部分浏览器重新加载一次当前页面。
    • CSS

    • 使用 4 个空格作为一个缩进层级。
    • 选择器{ 之间必须包含空格。
    • 属性名 与之后的 : 之间不允许包含空格,:属性值 之间必须包含空格,如:margin: 0;
    • 列表型属性值 书写在单行时,, 后必须跟一个空格,如:font-family: Arial, sans-serif;
    • 一个 rule 包含多个 selector 时,每个选择器声明必须独占一行,如:
      • >+~ 选择器的两边各保留一个空格,如:

      • 属性选择器中的值必须用双引号包围,如:
        • 选择器的嵌套层级应不大于 3 级,位置靠后的限定条件应尽可能精确,如:

        • 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性。
          • Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等
          • Box Model 相关属性包括:border / margin / padding / width / height 等
          • Typographic 相关属性包括:font / line-height / text-align / word-wrap 等
          • Visual 相关属性包括:background / color / transition / list-style 等

        • 尽量不使用 !important 声明。
        • url() 函数中的路径不加引号,如:background: url(bg.png);
        • 长度为 0 时须省略单位。(也只有长度单位可省),如:padding: 0 5px;
        • 颜色值中的英文字符采用小写。
        • 颜色值不允许使用命名色值,如:

        • 颜色值可以缩写时,必须使用缩写形式,如:background-color: #aca;
        • RGB 颜色值必须使用十六进制记号形式 #rrggbb。不允许使用 rgb(),如:

        • font-family 属性中的字体族名称应使用字体的英文 Family Name,其中如有空格,须放置在引号中,如:
        字体 操作系统 Family Name
        宋体(中易宋体) Windows SimSun
        黑体(中易黑体) Windows SimHei
        微软雅黑 Windows Microsoft YaHei
        微软正黑 Windows Microsoft JhengHei
        华文黑体 Mac/iOS STHeiti
        冬青黑体 Mac/iOS Hiragino Sans GB
        文泉驿正黑 Linux WenQuanYi Zen Hei
        文泉驿微米黑 Linux WenQuanYi Micro Hei
        • CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normalbold,使用数值描述增加了灵活性,也更简短,如:

        • 带私有前缀的属性由长到短排列,按冒号位置对齐,如:

        JavaScript

        • 使用 4 个空格做为一个缩进层级。
        • switch 下的 case 和 default 必须增加一个缩进层级,如:

        • 二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格,如:

        • 用作代码块起始的左花括号 { 前必须有一个空格,如:

        • 在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格,如:

        • 运算符处换行时,运算符必须在新行的行首,如:

        • 对于 if...else...try...catch...finally 的缩进:

        • if / else / for / do / while 语句中,即使只有一行,也不得省略块 {...}
        • 变量 使用 Camel命名法,如:var loadingModules = {};
        • 字符串开头和结束使用单引号 '
        • 拼接HTML字符串的排版:

        • 行尾不得有多余的空格。

评论

还没有任何评论,也用不到你