HTML
标签
- 自闭合的标签无需闭合
img、input、br、hr等 - 可选闭合的那种 需要闭合
- 减少标签数量、嵌套
Class & Id
- 一个项目 尽量只有一个ID属性
- classname and id 的命名尽量用 功能和内容
- 样式尽量用
-分割
嵌套
-
<li>用于<ul>或<ol>下 -
<dd><dt>用于<dl>下 -
<thead><tbody><tfoot><tr><td>用于<table>下 - inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
-
<a>里不可以嵌套交互式元素<a>、<button>、<select>等; -
<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等
HEAD
- 文档类型
<!DOCTYPE html> - 语言属性
<lang="zh-cmn-Hans">参考链接 - 字符编码(必须是
<head>标签的第一个子元素)<meta charset="utf-8"> - 优先使用最新内核
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -
SEO优化<meta name="keywords" content="your keywords"> <meta name="description" content="your description"> <meta name="author" content="author,email address"> -
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
iOS图标
-
apple-touch-icon图片自动处理成圆角和高光等效果; -
apple-touch-icon-precomposed禁止系统自动添加效果，直接显示设计原图;
-
-
favicon
<link rel="shortcut icon" href="path/to/favicon.ico">
语义化
更多标签 参考
| 标签 | 语义 |
|---|---|
| <p> | 段落 |
| <h1>、<h2>、<h3>... | 标题 |
| <ul>、<ol> | 列表 |
| <blockquote> | 引用 大 |
| <cite>Ï | 引用 normal |
| <b> | 粗 |
| <storng> | 强调加粗 |
| <i> | 倾斜 |
| <em> | 内容倾斜 |
| <code> | 代码 |
| <abbr> | 缩写 |
CSS
声明顺序
Positioning > Box model > Typographic > Visua
位置信息 > 盒子模型 > 排版信息 > 视觉效果Ï
十六进制
全部小写
class命名推荐词
- 布局类：header, footer, container, main, content, aside, page, section
- 包裹类：wrap, inner
- 区块类：region, block, box
- 结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表类：list, item, field
- 主次类：primary, secondary, sub, minor
- 大小类：s, m, l, xl, large, small
- 状态类：active, current, checked, hover, fail, success, warn, error, on, off
- 导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
- 交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
- 星级类：rate, star
- 分割类：group, seperate, divider
- 等分类：full, half, third, quarter
- 表格类：table, tr, td, cell, row
- 图片类：img, thumbnail, original, album, gallery
- 语言类：cn, en
- 论坛类：forum, bbs, topic, post
- 方向类：up, down, left, right
- 其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading…
其他要求
-
url()、属性选择符、属性值使用双引号 - 将媒体查询(Media query)放在尽可能相关规则的附近
- 不要使用
@import - 链接样式顺序
a:link -> a:visited -> a:hover -> a:active（LoVeHAte） - 中线链接
- 图标以
icon-为头
JavaScript
命名
- 变量 驼峰命名法
- 私有属性变量方法
_开头 - 常量 全部字母大写,
_分隔 - 函数及函数的参数 驼峰命名法
- 类 单词首字母大写, 类的方法及属性 驼峰命名法
- 多个单词组成的缩写词, 在命名中, 根据当前命名法和出现的位置, 所有字母的大小写与首字母大小写保持一致
词法
- 类名 使用名词
function Engine(options) {} - 函数名，使用动宾短语。
function getStyle(element) {} -
boolean类型的变量 使用 is 或 has 开头。
var isReady = false; var hasMoreCommands = false;
ES6^
let取代varletconst优先使用const(所有的函数应设置为const常量,let表示的变量，Ï只有该变量需要被重新赋值才用let)静态字符串使用单引号
动态字符串使用字符串模板
尽量使用解构赋值
单行定义的对象,最后一个成员不以逗号结尾
多行定义的对象,最后一个成员以逗号结尾
对象尽量静态化,不得随意添加属性.如果添加属性不可避免,使用
Object.assign()如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。
对象属性和方法尽量采用简洁表达法
使用默认值语法设置函数参数的默认值
其他要求
-
for-in循环只用于object/map/hash遍历, 因为Array上使用for-in循环会对所有出现在原型上的对象进行遍历 - 二元及三元操作符始终写在前一行
- 三元操作符替代
if...else -
&&||设置默认值和替代多个if嵌套判断 - 正则表达式 仅准用
.test()和.exec()。不准用"string".match() - 多个参数使用对象字面量存储
注释内容
Version 202012281312
文件注释
每个文件都尽量在头部添加一个头部注释
推荐格式
/*
*@Author:yourname
*@Date:2020-11-0909:32:24
@Description:
@FilePath:
*/
单行注释
独占一行，后跟一个空格，缩进与下一行被注释说明的代码一致
多行注释
避免使用 /.../这样的多行注释。有多行注释内容时，使用多个单行注释
函数注释
多次引用函数、公共函数、重要函数 公共函数 必须使用此种注释方式 注释
/**
*@description:描述
*@param{类型}参数
@return{}
*/
函数内注释
重要函数、公共函数、逻辑重函数这种函数在实现逻辑内部 尽量添加单行注释 解释每一个部分的意义所在
注释工具
使用方法
搜索 KoroFileHeader
安装
无图
配置
ctrl + shift + p
输入打开用户设置
搜索 fileheader
选择第一项进行设置
设置样例 你用到什么 就写什么
"fileheader.customMade":{//此为头部注释
"Description":"",
"Version":"2.0",
"Autor":"lhl",
"Date":"Donotedit",
"LastEditors":"lhl",
"LastEditTime":"Donotedit"
},
"fileheader.cursorMode":{//此为函数注释
"description":"",
"param":"",
"return":"",
"author":"lhl"
},
"fileheader.configObj":{
"autoAdd":true,
//默认开启自动添加头部注释，当文件没有设置头部注释时保存会自动添加
"autoAlready":true,//默认开启
"prohibitAutoAdd":[
"json",
"md"
],//禁止.json.md文件，自动添加头部注释
"wideSame":false,//设置为true开启
"wideNum":13//字段长度默认为13
}
本人的自定义设置
"fileheader.customMade":{
"Author":"yourname",
"Date":"Donotedit",
"Description":"",
"FilePath":"Donotedit",
}
