HTML部分
- HTML代码大小写
- HTML标签名、类名、标签属性和大部分属性值统一用小写
<div class="demo"></div>
- 元素属性
- 元素属性值使用双引号语法
<input type="text">
<input type="radio" name="name" checked="checked" >
- 注释部分
- 单行注释 :一般用于简单的描述,如某些状态描述、属性描述等。注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行
<!-- Comment Text -->
<div>...</div>
- 模块注释:一般用于描述模块的名称以及模块开始与结束的位置。注释内容前后各一个空格字符,S 表示模块开始,E 表示模块结束,模块与模块之间相隔一行。
<!-- S Comment Text A -->
<div class="mod_a">
...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->
<div class="mod_b">
...
</div>
<!-- E Comment Text B -->
CSS部分
- 代码风格(个人推荐使用展开格式书写样式)
- 样式书写一般有两种:一种是紧凑格式 (Compact)
.jdc{ display: block;width: 50px;}
- 一种是展开格式(Expanded)
.jdc{
display: block;
width: 50px;
}
- 代码大小写
- 样式选择器,属性名,属性值关键字全部使用小写字母书写
/* 推荐 */
.jdc{
display:block;
}
/* 不推荐 */
.JDC{
DISPLAY:BLOCK;
}
- 选择器
- 尽量少用通用选择器 *
- 非必要不使用 ID 选择器
- 不使用无具体语义定义的标签选择器
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}
/* 不推荐 */
*{}
#jdc {}
.jdc div{}
- 代码易读性及分号
- 左括号与类名之间一个空格,冒号与属性值之间一个空格
- 每个属性声明末尾都要加分号;
.jdc {
width: 100%;
height: 100%;
}
- 为单个css选择器或新申明开启新行
//推荐
.jdc,
.jdc_logo,
.jdc_hd {
color: #ff0;
}
.nav{
color: #fff;
}
//不推荐
.jdc,jdc_logo,.jdc_hd {
color: #ff0;
}.nav{
color: #fff;
}
- 颜色值( 统一使用RGBA() )格式
- 颜色值中不需有空格,且取值不要带有不必要的 0
//推荐
.jdc {
color: rgba(255,255,255,.5);
}
//不推荐
.jdc {
color: rgba( 255, 255, 255, 0.5 );
}
- 单位值
- 不要为 0 指明单位
//推荐
.jdc {
margin: 0 10px;
}
//不推荐
.jdc {
margin: 0px 10px;
}
- 属性书写顺序
- 遵循以下顺序
- 1、布局定位属性:display / position / float / clear / visibility / overflow
- 2、自身属性:width / height / margin / padding / border / background
- 3、文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
- 4、其他属性(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;
}
- 注释部分
- 单行注释:注释内容第一个字符和最后一个字符都是一个空格字符,单独占一行,行与行之间相隔一行
/* 推荐 */
/* Comment Text */
.jdc{}
/* Comment Text */
.jdc{}
/* 不推荐 */
/*Comment Text*/
.jdc{
display: block;
}
.jdc{
display: block;/*Comment Text*/
}
- 模块注释:注释内容第一个字符和最后一个字符都是一个空格字符,/* 与 模块信息描述占一行,多个横线分隔符-与*/占一行,行与行之间相隔两行。
/* 推荐 */
/* Module A
---------------------------------------------------------------- */
.mod_a {}
/* Module B
---------------------------------------------------------------- */
.mod_b {}
/* 不推荐 */
/* Module A ---------------------------------------------------- */
.mod_a {}
/* Module B ---------------------------------------------------- */
.mod_b {}
- 嵌套规范
- 选择器嵌套
/* CSS */
.jdc {}
.jdc_cover {}
.jdc_info {}
.jdc_info_name {}
/* SCSS */
.jdc {
&_cover {}
&_info {
&_name {}
}
}
- 属性嵌套
/* CSS */
.jdc {
background-color: red;
background-repeat: no-repeat;
background-image: url(/img/icon.png);
background-position: 0 0;
}
/* SCSS */
.jdc {
background: {
color: red;
repeat: no-repeat;
image: url(/img/icon.png);
position: 0 0;
}
}
命名部分
- 图片命名(全小写字母,统一用下划线作为连接符号 如:btn_hot)
- 建议以以下顺序命名:图片业务(可选) + 图片功能类别(必选)+ 图片模块名称(可选)
- 图片业务(可选):
- PP_:拍拍
- wx_:微信
- jd_:京东商城
- 图片功能类别:
- mod_:是否公共,可选
- icon:模块类固化的图标
- logo:LOGO类
- btn:按钮
- bg:可平铺或者大背景
- 图片模块名称:(此部分可采用小驼峰式命名)
- goodsList:商品列表
- goodsInfo:商品信息
- ClassName命名:
- ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用减号符 “ - ” 连接。
- 当子孙模块数量可预测的情况下,严格继承祖先模块的命名前缀。
<div class="modulename">
<div class="modulename-cover"></div>
<div class="modulename-info"></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>
- 常用命名推荐
ClassName | 含义 |
---|---|
wrap | 容器,包,一般用于最外层 |
about | 关于 |
avatar | 头像 |
bar | 栏(工具类) |
btn | 按钮 |
login | 登录 |
logo | 标志 |
main | 主体 |
pop | 弹窗 |
title | 标题 |
tips | 提示 |
- JavaScript 变量命名(推荐使用小驼峰式命名)
- 当命名变量时,主流分为驼峰式命名(constiableName,ConsiableName)和下划线命名(constiable_name)两大阵营。
JavaScript 规范:
-
请记得 const 和 let 都是块级作用域,var 是函数级作用域
-
对所有引用都使用 const,不要使用 var(原因:这样做可以确保你无法重新分配引用,以避免出现错误和难以理解的代码)。
-
如果引用是可变动的,使用 let 代替 var(原因:let 是块级作用域的,而不像 var 属于函数级作用域)。
-
字符串统一使用单引号的形式 ’ '。
-
使用 === 和 !== 而非 == 和 !=
-
禁止链式赋值与链式创建对象
-
所有 v-for 循环必须设置key(key 必须设置成唯一性的值,无唯一性的值采用索引)
//不推荐
const a = b = c = 1
const a, b, c
//推荐
const a = 1
const b = 1
const c = 1
const a
const b
const c