基于凹凸实验室的个人前端项目规范!(值得一看)

HTML部分

  1. HTML代码大小写
  • HTML标签名、类名、标签属性和大部分属性值统一用小写
<div class="demo"></div>
  1. 元素属性
  • 元素属性值使用双引号语法
<input type="text">
	
<input type="radio" name="name" checked="checked" >
  1. 注释部分
  • 单行注释 :一般用于简单的描述,如某些状态描述、属性描述等。注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行
<!-- 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部分

  1. 代码风格(个人推荐使用展开格式书写样式)
  • 样式书写一般有两种:一种是紧凑格式 (Compact)
.jdc{ display: block;width: 50px;}
  • 一种是展开格式(Expanded)
.jdc{
    display: block;
    width: 50px;
}
  1. 代码大小写
  • 样式选择器,属性名,属性值关键字全部使用小写字母书写
/* 推荐 */
.jdc{
	display:block;
}
	
/* 不推荐 */
.JDC{
	DISPLAY:BLOCK;
}
  1. 选择器
  • 尽量少用通用选择器 *
  • 非必要不使用 ID 选择器
  • 不使用无具体语义定义的标签选择器
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}
  1. 代码易读性及分号
  • 左括号与类名之间一个空格,冒号与属性值之间一个空格
  • 每个属性声明末尾都要加分号;
.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;
}
  1. 颜色值( 统一使用RGBA() )格式
  • 颜色值中不需有空格,且取值不要带有不必要的 0
//推荐
.jdc {
    color: rgba(255,255,255,.5);
}

//不推荐
.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}
  1. 单位值
  • 不要为 0 指明单位
//推荐
.jdc {
    margin: 0 10px;
}

//不推荐
.jdc {
    margin: 0px 10px;
}
  1. 属性书写顺序
  • 遵循以下顺序
  • 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;
}
  1. 注释部分
  • 单行注释:注释内容第一个字符和最后一个字符都是一个空格字符,单独占一行,行与行之间相隔一行
/* 推荐 */
/* 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 {}
  1. 嵌套规范
  • 选择器嵌套
/* 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;
    }
}

命名部分

  1. 图片命名(全小写字母,统一用下划线作为连接符号 如:btn_hot)
  • 建议以以下顺序命名:图片业务(可选) + 图片功能类别(必选)+ 图片模块名称(可选)
  • 图片业务(可选):
    • PP_:拍拍
    • wx_:微信
    • jd_:京东商城
  • 图片功能类别:
    • mod_:是否公共,可选
    • icon:模块类固化的图标
    • logo:LOGO类
    • btn:按钮
    • bg:可平铺或者大背景
  • 图片模块名称:(此部分可采用小驼峰式命名)
    • goodsList:商品列表
    • goodsInfo:商品信息
  1. 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 提示
  1. 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

你可能感兴趣的:(JS,前端,javascript,html)