HTML规范
代码规范
- HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>- 推荐使用属性值 cmn-Hans-CN（简体, 中国大陆），但是考虑浏览器和操作系统的兼容性，目前仍然使用 zh-CN 属性值
<html lang="zh-CN"><meta charset="UTF-8">- 空元素标签都不加 “/” 字符
元素属性
- 元素属性值使用双引号语法
- 元素属性值可以写上的都写上
<input type="tel">注释规范
####单行注释 一般用于简单的描述，如某些状态描述、属性描述等 注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行 推荐：<!-- Comment Text -->
<div>...</div>模块注释
一般用于描述模块的名称以及模块开始与结束的位置
注释内容前后各一个空格字符，<!-- S Comment Text --> 表示模块开始，<!-- E Comment Text -->表示模块结束，模块与模块之间相隔一行
推荐写法：
<!-- S Comment Text A -->
<div class="mod_a">
...
</div>
<!-- E Comment Text A --><!-- S Comment Text -->
<!-- E Comment Text --><!-- /Comment Text -->注释写在模块结尾标签底部，单独一行。
图片规范
- HTML 中图片引入不需添加 width、height 属性，alt 属性应该写上
- CSS 中图片引入不需要引号
CSS规范
代码规范
样式文件必须写上 @charset 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”，统一使用展开格式书写样式
@charset "UTF-8";
.jdc{
display: block;
width: 50px;
}选择器
- 尽量少用通用选择器 *
- 不使用 ID 选择器
- 不使用无具体语义定义的标签选择器（div）
代码易读性
- 左括号与类名之间一个空格，冒号与属性值之间一个空格
- 逗号分隔的取值，逗号之后一个空格
- 为单个css选择器或新申明开启新行
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}- 颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0
.jdc {
color: rgba(255,255,255,.5);
}- 不要为 0 指明单位
属性值引号
- css属性值需要用到引号时，统一使用单引号
属性书写顺序
- 建议遵循以下顺序：
- 布局定位属性：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 …
CSS3浏览器私有前缀写法
- CSS3 浏览器私有前缀在前，标准前缀在后
.jdc {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}注释规范
单行注释
- 注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行
模块注释
- 注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行
/* Module A
---------------------------------------------------------------- */
.mod_a {}文件信息注释
在样式文件编码声明 @charset 语句下面注明页面名称、作者、创建日期等信息
@charset "UTF-8";
/**
* @desc File Info
* @author Author Name
* @date 2015-10-10
*/标准的注释规范如下：
@charset "UTF-8";
/**
* @desc File Info
* @author liqinuo
* @date 2015-10-10
*/
/* Module A
----------------------------------------------------------------*/
.mod_a {}
/* module A logo */
.mod_a_logo {}
/* module A nav */
.mod_a_nav {}
/* Module B
----------------------------------------------------------------*/
.mod_b {}
/* module B logo */
.mod_b_logo {}
/* module B nav */
.mod_b_nav {}重置样式
移动端
* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; }
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; }
img { border: 0 none; vertical-align: top; }
i, em { font-style: normal; }
ol, ul { list-style: none; }
input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
a { text-decoration: none; color: #666; }
body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; fon-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; }
input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }PC端
html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal }
article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; }
ul, ol { list-style: none; }
img { border: 0 none; vertical-align: top; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table { border-collapse: collapse; border-spacing: 0; }
strong, em, i { font-style: normal; font-weight: normal; }
ins { text-decoration: underline; }
del { text-decoration: line-through; }
mark { background: none; }
input::-ms-clear { display: none !important; }
body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; }
a { text-decoration: none; color: #333; }
a:hover { text-decoration: underline; }命名规范
HTML/CSS文件命名
确保文件命名总是以字母开头而不是数字，且字母一律小写，以下划线连接且不带其他标点符号
ClassName命名
ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “” 连接。祖先模块不能出现下划线，除了是全站公用模块，如 mod 系列的命名：
推荐：
<div class="modulename">
<div class="modulename_info">
<div class="modulename_son"></div>
<div class="modulename_son"></div>
...
</div>
</div>在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀,当子孙模块超过4级或以上的时候，可以考虑在祖先模块内具有识辨性的独立缩写作为新的子孙模块
<div class="modulename">
<div class="modulename_cover"></div>
<div class="modulename_info">
<div class="modulename_info_user">
<div class="modulename_info_user_img">
<img src="" alt="">
<!-- 这个时候 miui 为 modulename_info_user_img 首字母缩写-->
<div class="miui_tit"></div>
<div class="miui_txt"></div>
...
</div>
</div>
<div class="modulename_info_list"></div>
</div>
</div>JS规范
语言规范
引用
const 和 let 都是块级作用域，var 是函数级作用域，对所有引用都使用 const，不要使用 var，如果引用是可变动的，则使用 let
对象
- 请使用对象方法的简写方式
// bad
const item = {
value: 1,
addValue: function (val) {
return item.value + val
}
}
// good
const item = {
value: 1,
addValue(val) {
return item.value + val
}
}- 请使用对象属性值的简写方式
const job = 'FrontEnd'
// bad
const item = {
job: job
}
// good
const item = {
job
}数组
- 向数组中添加元素时，请使用 push 方法
const items = []
// bad
items[items.length] = 'test'
// good
items.push('test')- 使用拓展运算符 … 复制数组
// bad
const items = []
const itemsCopy = []
const len = items.length
let i
// bad
for (i = 0; i < len; i++) {
itemsCopy[i] = items[i]
}
// good
itemsCopy = [...items]- 使用数组的 map 等方法时，请使用 return 声明，如果是单一声明语句的情况，可省略 return
解构赋值
当需要使用对象的多个属性时，请使用解构赋值
// bad
function getFullName (user) {
const firstName = user.firstName
const lastName = user.lastName
return `${firstName} ${lastName}`
}
// good
function getFullName (user) {
const { firstName, lastName } = user
return `${firstName} ${lastName}`
}
// better
function getFullName ({ firstName, lastName }) {
return `${firstName} ${lastName}`
}- 当需要使用数组的多个值时，请同样使用解构赋值
const arr = [1, 2, 3, 4]
// bad
const first = arr[0]
const second = arr[1]
// good
const [first, second] = arr- 函数需要回传多个值时，请使用对象的解构，而不是数组的解构
// bad
function doSomething () {
return [top, right, bottom, left]
}
// 如果是数组解构，那么在调用时就需要考虑数据的顺序
const [top, xx, xxx, left] = doSomething()
// good
function doSomething () {
return { top, right, bottom, left }
}
// 此时不需要考虑数据的顺序
const { top, left } = doSomething()字符串
程序化生成字符串时，请使用模板字符串
const test = 'test'
// bad
const str = ['a', 'b', test].join()
// bad
const str = 'a' + 'b' + test
// good
const str = `ab${test}`函数
- 请使用函数声明，而不是函数表达式
// bad
const foo = function () {
// do something
}
// good
function foo () {
// do something
}- 不要在非函数代码块中声明函数
// bad
if (isUse) {
function test () {
// do something
}
}
// good
let test
if (isUse) {
test = () => {
// do something
}
}- 不要使用 arguments，可以选择使用 …，arguments 只是一个类数组，而 … 是一个真正的数组
// bad
function test () {
const args = Array.prototype.slice.call(arguments)
return args.join('')
}
// good
function test (...args) {
return args.join('')
}- 不要更改函数参数的值
// bad
function test (opts) {
opts = opts || {}
}
// good
function test (opts = {}) {
// ...
}迭代器
不要使用 iterators
const numbers = [1, 2, 3, 4, 5]
// bad
let sum = 0
for (let num of numbers) {
sum += num
}
// good
let sum = 0
numbers.forEach(num => sum += num)
// better
//reduce: 数组所元素调用指定调函数 该调函数返值累积结并且返值调用该调函数作参数提供
const sum = numbers.reduce((total, num) => total + num, 0)
扫一扫
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
