宗旨：提高合作和代码质量，不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。
? 针对 HTML5 doctype
排版规则
- 缩进 1个TAB=4个空格
- 所有的代码都用小写字母
- 行尾空格没必要存在
HTML
- 不要在自闭合（self-closing）元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。常见无需自闭合标签有
input、br、img、hr等。 - 在HTML模板和文件中指定编码
<meta charset="utf-8">,从而全部与文档编码一致， 不需要制定样式表的编码，它默认为UTF-8。 - 为html根元素指定lang属性，
<html lang="zh-CN">...</html>根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。
- IE采用其所支持的最新的模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
- 根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定
type属性，因为text/css和text/javascript分别是它们的默认值。 - 引入
CSS时必须指明rel="stylesheet"。 - 属性顺序：
class->id,name->data-*->src, for, type , href->title, alt->aria-*, role - 布尔型属性可以在声明时不赋值。如：
<input type="text" disabled>
- 对于属性的定义，确保全部使用双引号，绝不要使用单引号或不用引号。
常见标签语义
- p - 段落
- h1,h2,h3,h4,h5,h6 - 层级标题
- strong,em - 强调
- ins - 插入
- del - 删除
- abbr - 缩写
- code - 代码标识
- cite - 引述来源作品的标题
- q - 引用
- blockquote - 一段或长篇引用
- ul - 无序列表
- ol - 有序列表
- dl,dt,dd - 定义列表
CSS
- 分多行写，通过使用sublime插件CSScomb CSS【Ctrl+shift+F】进行格式化
- 所有声明语句都应当以分号结尾，最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，增加新样式时可能更易出错。
- 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，
.5代替0.5；-.5px代替-0.5px）。 - 十六进制值应该全部小写,尽量使用简写形式的十六进制值，小写字符更易于分辨。
- 避免为 0 值指定单位
- 声明顺序: 定位 -> 盒模型 -> 文字属性 -> 背景边框属性 -> 其他
- 媒体查询（Media query）的位置，将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。
- 简写属性：padding/margin,font,background,border,border-radius
- 注释：
/* aaa */ - 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3。
- 属性选择器，字体名称等中的值必须用双引号包围。
- url()中的路径不加引号，绝对路径可省去协议名（用协议相对 URL）。
命名规则
- class 名称中只能出现小写字符和破折号（dashe）（不是下划线，也不是驼峰命名法）。破折号应当用于相关 class 的命名（类似于命名空间）（例如，
.btn和.btn-danger）。 - 避免过度任意的简写。
.btn代表 button，但是.s不能表达任何意思。 - class 名称应当尽可能短，并且意义明确。
- 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。
- 基于最近的父 class 或基本（base） class 作为新 class 的前缀。
- 使用
.js-*class 来标识行为（与样式相对），并且不要将这些 class 包含到 CSS 文件中。
JS
- 不要在循环体中包含函数表达式，事先将函数提取到循环体外。
- 对循环内多次使用的不变值，在循环外用变量缓存。
- 转换成string时，使用 + ‘‘ 。
- 转换成number时，通常使用 + 。
- number去除小数点，使用Math.floor / Math.round / Math.ceil，不使用 parseInt。
- 字符串开头和结束使用单引号
‘。
命名规则
- 变量 使用驼峰命名法（如：playNum），获取的是元素用this,$img）
- 常量 使用全部大写字母,单词间下划线分隔（如：var PLAY_NUM=1;）
- boolean 类型的变量使用is或has开头
注释
/**
* 函数说明
*
* @param {变量类型} 变量名 变量解释
* @param {Node} element
* @param {Object} options
* @param {boolean} removeEventListeners
*/*不必故意去压缩JS或CSS，会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件
- Javascript编码规范
- HTML编码规范
- CSS编码规范
- Less编码规范 [1.1]
- E-JSON数据传输标准 [1.0]
- 模块和加载器规范 [1.1]
- 包结构规范 [1.1]
- 项目目录结构规范 [1.1]
- 图表库标准 [1.0]
原文地址：https://www.cnblogs.com/conglvse/p/9525237.html
时间： 2024-10-07 19:55:53