• 规范文档


    宗旨:提高合作和代码质量,不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。

    ♦ 针对 HTML5 doctype

    排版规则

    • 缩进 1个TAB=4个空格

    - 所有的代码都用小写字母

    • 行尾空格没必要存在

    HTML

    1. 不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。常见无需自闭合标签有 inputbrimghr 等。
    2. 在HTML模板和文件中指定编码 <meta charset="utf-8"> ,从而全部与文档编码一致, 不需要制定样式表的编码,它默认为UTF-8。
    3. 为html根元素指定lang属性,<html lang="zh-CN">...</html>
      根据 HTML5 规范:

      强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。

    4. IE采用其所支持的最新的模式
      <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    5. 根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性,因为text/csstext/javascript 分别是它们的默认值。
    6. 引入 CSS 时必须指明 rel="stylesheet"
    7. 属性顺序class -> id,name -> data-* -> src, for, type , href -> title, alt -> aria-*, role
    8. 布尔型属性可以在声明时不赋值。如:
      <input type="text" disabled>
    9. 对于属性的定义,确保全部使用双引号,绝不要使用单引号或不用引号。

    常见标签语义

    • p - 段落
    • h1,h2,h3,h4,h5,h6 - 层级标题
    • strong,em - 强调
    • ins - 插入
    • del - 删除
    • abbr - 缩写
    • code - 代码标识
    • cite - 引述来源作品的标题
    • q - 引用
    • blockquote - 一段或长篇引用
    • ul - 无序列表
    • ol - 有序列表
    • dl,dt,dd - 定义列表

    CSS

    1. 分多行写,通过使用sublime插件CSScomb CSS【Ctrl+shift+F】进行格式化
    2. 所有声明语句都应当以分号结尾,最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,增加新样式时可能更易出错。
    3. 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5-.5px 代替-0.5px)。
    4. 十六进制值应该全部小写,尽量使用简写形式的十六进制值,小写字符更易于分辨。
    5. 避免为 0 值指定单位
    6. 声明顺序: 定位 -> 盒模型 -> 文字属性 -> 背景边框属性 -> 其他
    7. 媒体查询(Media query)的位置,将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了,将来只会被大家遗忘。
    8. 简写属性:padding/margin,font,background,border,border-radius
    9. 注释:/* aaa */
    10. 选择器要尽可能短,并且尽量限制组成选择器的元素个数,建议不要超过 3。
    11. 属性选择器,字体名称等中的值必须用双引号包围。
    12. url()中的路径不加引号,绝对路径可省去协议名(用协议相对 URL)。

    命名规则

    • class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关 class 的命名(类似于命名空间)(例如,.btn.btn-danger)。
    • 避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。
    • class 名称应当尽可能短,并且意义明确。
    • 使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。
    • 基于最近的父 class 或基本(base) class 作为新 class 的前缀。
    • 使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。

    JS

    1. 不要在循环体中包含函数表达式,事先将函数提取到循环体外。
    2. 对循环内多次使用的不变值,在循环外用变量缓存。
    3. 转换成string时,使用 + '' 。
    4. 转换成number时,通常使用 + 。
    5. number去除小数点,使用Math.floor / Math.round / Math.ceil,不使用 parseInt。
    6. 字符串开头和结束使用单引号 '

    命名规则

    1. 变量 使用驼峰命名法(如:playNum),获取的是元素用elmthis,$img)
    2. 常量 使用全部大写字母,单词间下划线分隔(如:var PLAY_NUM=1;)
    3. boolean 类型的变量使用is或has开头

    注释

    /**
     * 函数说明
     *
     * @param {变量类型} 变量名 变量解释
     * @param {Node} element
     * @param {Object} options
     * @param {boolean} removeEventListeners
     */

    *不必故意去压缩JS或CSS,会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件

  • 相关阅读:
    tomcat简介与配置
    gitlab简介与配置
    cobbler自动装机服务简介与配置
    Linux中管理员用户与普通用户之间的切换
    kafka 学习
    Linux系统swappiness参数在内存与交换分区之间优化作用
    CentOS7中使用yum安装Nginx的方法
    配置两个Hadoop集群Kerberos认证跨域互信
    Linux shell中2>&1的含义解释
    解决SpringBoot多工程时jar包中注解不能扫描生效问题
  • 原文地址:https://www.cnblogs.com/conglvse/p/9525237.html
Copyright © 2020-2023  润新知