大段引用一般引用
为样式加粗而加粗
|为强调内容而加粗
|为样式倾斜而倾斜
|为强调内容而倾斜
|代码标识
|缩写
CSS
以组件为单位组织代码
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔；
如果使用了多个CSS文件，将其按照组件而非页面的形式分拆，因为页面会被重组，而组件只会被移动；
避免选择器嵌套层级过多,尽量少于3级
避免ClassID叠加使用
声明块
选择器分组时,保持独立的选择器占用一行
声明块的左括号{前添加一个空格；
声明块的右括号}应单独成行；
声明语句中的:
后应添加一个空格；
声明语句应以分号;结尾；
一般以逗号分隔的属性值，每个逗号后应添加一个空格；
rgb（）、rgba（）、hsl（）、hsla（）或rect（）括号内的值，逗号分隔，但逗号后不添加一个空格；
对于属性值或颜色参数，省略小于1的小数前面的0（例如，.5代替0.5；-.5px代替-0.5px）；
十六进制值应该全部小写和尽量简写，例如，#fff代替#ffffff；
避免为0值指定单位
声明顺序Positioning>Boxmodel>Typographic>Visual
url（）、属性选择符、属性值使用双引号。
将媒体查询（Mediaquery）放在尽可能相关规则的附近
不要使用@import
链接样式顺序a:
link->a:
visited->a:
hover->a:
active（LoVeHAte）
使用Autoprefixer自动添加浏览器前缀,书写CSS无需添加浏览器前缀
/*==========================================================================
组件块
============================================================================*//*子组件块
============================================================================*/
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（boxmodel）相关的样式，因此排在首位。
盒模型决定了组件的尺寸和位置，因此排在第二位。
其他属性只是影响组件的内部（inside）或者是不影响前两组属性。
.declaration-order{/*Positioning*/
position:
absolute;
top:
0;
right:
0;
bottom:
0;
left:
0;
z-index:
100;/*Boxmodel*/
display:
block;
box-sizing:
border-box;
width:
100px;
height:
100px;
padding:
10px;
border:
1pxsolid#e5e5e5;
border-radius:
3px;
margin:
10px;
float:
right;
overflow:
hidden;/*Typographic*/
font:
normal13px"HelveticaNeue",sans-serif;
line-height:
1.5;
text-align:
center;/*Visual*/
background-color:
#f5f5f5;
color:
#fff;
opacity:
.8;/*Other*/
cursor:
pointer;
}
CSS网页字体排版
字体
内文字体
p{font-family:
"Georgia","TimesNewRoman","SongtiSC","SimSun",serif;}
标题字体
h1,h2,h3,h4,h5,h6{font-family:
"LucidaGrande","HelveticaNeue","Arial","HiraginoSansGB","NotoSansCJKSC","HeitiSC","MicrosoftYaHei","WenQuanYiMicrohei",sans-serif;}
字号
将内文以16px作为字号
标题h1,h2,h3,h4,h5,h6以16px作为字号基础，按同比例的递减
p{font-size:
16px;}h1{font-size:
2em;}h2{font-size:
1.8em;}h3{font-size:
1.6em;}h4{font-size:
1.4em;}h5,h6{font-size:
1.2em;}
行高
将内文以1.7em作为行高
标题h1,h2,h3,h4,h5,h6以1.5em作为行高.
p{line-height:
1.7em;}h1,h2,h3,h4,h5,h6{line-height:
1.5em;}
段落间距
p{margin-bottom:
1.7em;}h1,h2,h3,h4,h5,h6{margin-top:
.7em;margin-bottom:
0.2em;
}
齐头尾
p{text-align:
justify;text-justify:
inter-ideographic;
}
断词使中英文混排时字符间距不会被齐头尾拉的不均匀
p{word-break:
break-all;}
Less
代码顺序@import>变量声明>样式声明
@import.less不得省略,用双引号
Mixin
在定义mixin时，如果mixin名称不是一个需要使用的className，必须加上括号，否则即使不被调用也会输出到CSS中。
如果混入的是本身不输出内容的mixin，需要在mixin后添加括号（即使不传参数），以区分这是否是一个className。
避免嵌套层级过多,限制在2层
可以使用字符串插值使变量嵌入字符串中@base-url:
"";background-image:
url（"@{base-url}/images/bg.png"）;
命名（从组件方式思考命名）
Components至少以两个单词命名,通过-分离.like-button.search-form.article-card
Elements（Element是Components中的元素）
类名尽可能仅有一个单词
多个单词应直接连接
避免标签选择器（性能稍弱,表意不明）
Variants（变体）带有前缀-
Positioning（position,top,left,right,bottom）
Floats（float,clear）
Margins（margin）
Dimensions（width,height）
.-wide.-short.-disabled.title.-small
避免定位属性
头像logos等元素应设置固定尺寸
在父元素中设置定位
避免过分嵌套
className命名
常见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…
简单规则
以中划线连接，如.item-img
使用两个中划线表示特殊化，如.item-img.item-img--small表示在.item-img的基础上特殊化
状态类直接使用单词，参考上面的关键词，如.active,.checked
图标以icon-为前缀（字体图标采用.icon-font.i-name方式命名）。
模块采用关键词命名，如.slide,.modal,.tips,.tabs，特殊化采用上面两个中划线表示，如.imgslide--full,.modal--pay,.tips--up,.tabs--simple
js操作的类统一加上js-前缀
不要超过四个class组合使用，如.a.b.c.d
JavaScript
注释如无必要勿增注释,如有必要尽量详尽,只使用//,避免使用/*...*/
函数方法注释包含函数说明参数和返回值及返回值类型,如果函数是内部函数可以使用@inner标识
文件注释应该提供文件的大体内容,它的作者,依赖关系和兼容性信息。
如下:
/**
*函数描述
*
*@param{string}p1参数1的说明
*@param{string}p2参数2的说明，比较长
*那就换行了.
*@param{number=}p3参数3的说明（可选）
*@return{Object}返回值描述
*/
/**
*@fileoverviewDescriptionoffile,itsusesandinformation
*aboutitsdependencies.
*@authoruser@（FirstnameLastname）
*Copyright2009MeizuInc.AllRightsReserved.
*/
命名
变量驼峰命名法
私有属性变量方法_开头
常量全部字母大写,_分隔
函数及函数的参数驼峰命名法
类单词首字母大写,类的方法及属性驼峰命名法
枚举变量单词首字母大写,枚举属性全部字母大写,_分隔
多个单词组成的缩写词,在命名中,根据当前命名法和出现的位置,所有字母的大小写与首字母大小写保持一致
命名词法
类名使用名词functionEngine（options）{}
函数名，使用动宾短语。
functiongetStyle（element）{}
boolean类型的变量使用is或has开头。
varisReady=false;varhasMoreCommands=false;
Promise对象用动宾短语的进行时表达。
varloadingData=ajax.get（'url'）;loadingData.then（callback）;
接口命名规范（1.可读性强2.不与jQuery社区习惯冲突3.尽量写全不用缩写,除非下表中已经约定的）
常用词说明
options表示选项，与jQuery社区保持一致，不要用config,opts等
active表示当前，不要用current等
index表示索引，不要用idx等
trigger触点元素
triggerType触发类型、方式
context表示传入的this对象
object推荐写全，不推荐简写为o,obj等
element推荐写全，不推荐简写为el,elem等
length不要写成len,l
prevprevious的缩写
nextnext下一个
constructor不能写成ctor
easing示动画平滑函数
minminimize的缩写
maxmaximize的缩写
DOM不要写成dom,Dom
.hbs使用hbs后缀表示模版
btnbutton的缩写
link超链接
title主要文本
img图片路径（img标签src属性）
datasethtml5data-xxx数据接口
theme主题
className类名
classNameSpaceclass命名空间
TrueFalse
类型检测优先使用typeof
对象检测使用instanceof
null或undefined检测使用==null
返回falsenullundefined''0
返回true'0'[]{}
for-in循环只用于object/map/hash遍历,因为Array上使用for-in循环会对所有出现在原型上的对象进行遍历
二元及三元操作符始终写在前一行
三元操作符替代if...else
&&||设置默认值和替代多个if嵌套判断
正则表达式仅准用.test（）和.exec（）。
不准用"string".match（）
多个参数使用对象字面量存储
jQuery
使用最新版本的jQuery
jQuery变量以$开头,并缓存到本地变量中复用,使用驼峰命名法命名
jQuery选择器
尽量使用ID选择器
父元素选择子元素用.find（）方法性能会更好
DOM操作,尽量先与节点分离,操作结束后再插入节点
字符串连接array.join（''）>+>.append（）
事件
如果需要，对事件使用自定义的namespace，这样容易解绑特定的事件，而不会影响到此DOM元素的其他事件监听；
对Ajax加载的DOM元素绑定事件时尽量使用事件委托。
事件委托允许在父元素绑定事件，子代元素可以响应事件，也包括Ajax加载后添加的子代元素；
$（"#myLink"）.on（"click.mySpecialClick",myEventHandler）;
$（"#myLink"）.unbind（"click.mySpecialClick"）;
//Notrecommended$（"#lista"）.on（"click",myClickHandler）;//Recommended$（"#list"）.on（"click","a",myClickHandler）;
链式写法1.尽量使用链式写法而不是用变量缓存或者多次调用选择器方法；2.当链式写法超过三次或者因为事件绑定变得复杂后，使用换行和缩进保持代码可读性；
CSS不要写在jQuery里面
避免使用jQuery实现动画
禁止使用slideUp/Down（）fadeIn/fadeOut（）等方法；
尽量不使用animate（）方法；
jQuery插件模板
//jQueryPluginBoilerplate//AboilerplateforjumpstartingjQuerypluginsdevelopment//version1.1,May14th,2011//byStefanGabos//remembertochangeeveryinstanceof"pluginName"tothenameofyourplugin!
（function（$）{//herewego!
$.pluginName=function（element,options）{//plugin'sdefaultoptions
//thisisprivatepropertyandisaccessibleonlyfrominsidetheplugin
vardefaults={
foo:
'bar',//ifyourpluginisevent-driven,youmayprovidecallbackcapabilities
//foritsevents.executethesefunctionsbeforeoraftereventsofyour
//plugin,sothatusersmaycustomizethoseparticulareventswithout
//changingtheplugin'scode
onFoo:
function（）{}
}//toavoidconfusions,use"plugin"toreferencethe
//currentinstanceoftheobject
varplugin=this;//thiswillholdthemergeddefault,anduser-providedoptions
//plugin'spropertieswillbeavailablethroughthisobjectlike:
//plugin.settings.propertyNamefrominside