目录
html规范
代码缩进
统一使用2个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）
HTML代码大小写
HTML标签名、类名、标签属性和大部分属性值统一用小写
推荐：
不推荐：
元素属性
- 元素属性值使用双引号语法
- 元素属性值可以写上的都写上
推荐： 不推荐： 代码嵌套
元素嵌套规范，每个块状元素独立一行，内联元素可选
推荐：
不推荐：
段落元素与标题元素只能嵌套内联元素
推荐：
不推荐：
CSS规范
代码格式化
推荐： .jdc{ display: block; width: 50px; } 不推荐： .jdc{ display: block;width: 50px;} 代码大小写
样式选择器，属性名，属性值关键字全部使用小写字母书写，类名可用’ – ‘隔开，属性字符串允许使用大小写。
/* 推荐 */
.jdc {
display:block;
}
.jdc-html {
display:block;
}
/* 不推荐 */
.JDC {
DISPLAY:BLOCK;
}
.jdcHtml {
DISPLAY:BLOCK;
}选择器
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
/* 推荐 */ .jdc {} .jdc li {} .jdc li p{} /* 不推荐 */ #jdc {} .jdc div{}代码易读性
左括号与类名之间一个空格，冒号与属性值之间一个空格，末尾加分号
推荐： .jdc { width: 100%; } 不推荐： .jdc{ width:100%; }逗号分隔的取值，逗号之后一个空格
推荐： .jdc { box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc; } 不推荐： .jdc { box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc; }为单个css选择器或新申明开启新行
推荐： .jdc, .jdc_logo, .jdc_hd { color: #ff0; } .nav{ color: #fff; } 不推荐： .jdc,jdc_logo,.jdc_hd { color: #ff0; }.nav{ color: #fff; }属性书写顺序
建议遵循以下顺序：
- 布局定位属性：display / position / float / clear / visibility / overflow
- 自身属性：width / height / margin / padding / border / background
- 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc { display: block; position: relative; float: left; width: 100px; height: 100px; margin: 0 10px; padding: 20px 0; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; color: #333; background: rgba(0,0,0,.5); -webkit-border-radius: 10px; -moz-border-radius: 10px; -o-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }js规范
命名规范
- 标准变量、函数名采用小驼峰命名法，构造器、类用大驼峰
ID在变量名中全大写- 常量全大写，用下划线连接；构造函数，大写第一个字
let thisIsMyName; let goodID; let reportURL; let AndroidVersion; let iOSVersion; let MAX_COUNT = 10; function Person(name) { this.name = name; } class User { constructor(options) { this.name = options.name; } }代码缩进
使用 2 个空格作为缩进
代码可读性
隔开函数签名，括号两边用空格隔开。
推荐 const x = function () {}; const y = function a() {}; 不推荐 const f = function(){}; const g = function (){}; const h = function() {}; 使用空格把运算符隔开。
推荐 const newName = 'CKS'; 不推荐 const newName='CKS';大括号内部加空格，圆括号和中括号内部不要空格。
推荐 const foo = { clark: 'kent' }; const foo = [1, 2, 3]; console.log(foo[0]); 不推荐 const foo = {clark: 'kent'}; const foo = [ 1, 2, 3 ]; console.log(foo[ 0 ]); 避免不必要的三元表达式语句。
推荐 const foo = a || b; const bar = !!c; const baz = !c; 不推荐 const foo = a ? a : b; const bar = c ? true : false; const baz = c ? false : true;字符串
字符串统一使用单引号的形式 ''
// bad const department = "JDC" // good const department = 'JDC'参考：语言规范 | Aotu.io – 前端代码规范
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/209511.html原文链接：https://javaforall.net
