一，样式属性顺序
1、布局位置（position，top，right，z-index，display，float等）
2、尺寸大小（宽度，高度，填充，边距）
3、文字系列（字体，行高，字母间距，颜色文字对齐等）
4、视觉效果（background，border等）
5、其他（动画，转换等）
二，缩写属性和属性值
1、CSS有些属性是可以缩写的，比如填充，边缘，字体，背景，边框等等。缩写代码可以提高用户的阅读体验
2、当数值为小数时，小数点前面的“0”可以去除
3、“0像素”后面的单位可以去除
4、16进制的颜色代码重叠的字符可以缩写的尽量缩写
三、规则声明块样式规范
1、当规则声明块中有多个样式声明时，每条样式独占一行。
2、列表属性并排书写时，用逗号分隔，逗号后必须跟一个空格
3 、选择器与左大括号 {之间必须加一个空格
4、属性名与冒号之间不允许包含空格，冒号与属性值之间必须包含空格
5、在每条样式后面都以分号; 结尾。
6、规则声明块的右大括号} 独占一行。
7、所有最外层引号使用单引号 ' ' 。
8、当一个属性有多个属性值时，以逗号, 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。
9、每个规则声明间用空行分隔。
四，命名规范
1、一律小写
2、尽量用英文
3、命名短且语义化要好
4、名字长的单词可以选择使用烤串命名法，中间加横线来为选择器命名
3、命名短且语义化要好
4、名字长的单词可以选择使用烤串命名法，中间加横线来为选择器命名
- 布局：以g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
- 状态：以s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
- 工具：以u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
- 组件：以m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
- 钩子：以j 为命名空间，表示特定给JavaScript 调用的类名，例如：j-request、j-open。
5、不建议使用下划线来命名，存在浏览器兼容性问题，其次是JavaScript的变量命名也是用下划线，容易造成混淆。
6、不要滥用id标识，id在JS中是唯一的，不能多次使用，应该按需使用
7、统一语义理解和命名（如表所示）
- 布局（.g-）
语义 |
命名 |
简写 |
|---|---|---|
文档 |
doc |
doc |
头部 |
head |
hd |
主体 |
body |
bd |
尾部 |
foot |
ft |
主栏 |
main |
mn |
主栏子容器 |
mainc |
mnc |
侧栏 |
side |
sd |
侧栏子容器 |
sidec |
sdc |
盒容器 |
wrap/box |
wrap/box |
模块（.m-）、元件（.u-）
语义 |
命名 |
简写 |
|---|---|---|
导航 |
nav |
nav |
子导航 |
subnav |
snav |
面包屑 |
crumb |
crm |
菜单 |
menu |
menu |
选项卡 |
tab |
tab |
标题区 |
head/title |
hd/tt |
内容区 |
body/content |
bd/ct |
列表 |
list |
lst |
表格 |
table |
tb |
表单 |
form |
fm |
热点 |
hot |
hot |
排行 |
top |
top |
登录 |
login |
log |
标志 |
logo |
logo |
广告 |
advertise |
ad |
搜索 |
search |
sch |
幻灯 |
slide |
sld |
提示 |
tips |
tips |
帮助 |
help |
help |
新闻 |
news |
news |
下载 |
download |
dld |
注册 |
regist |
reg |
投票 |
vote |
vote |
版权 |
copyright |
cprt |
结果 |
result |
rst |
标题 |
title |
tt |
按钮 |
button |
btn |
输入 |
input |
ipt |
功能（.f-）
语义 |
命名 |
简写 |
|---|---|---|
浮动清除 |
clearboth |
cb |
向左浮动 |
floatleft |
fl |
向右浮动 |
floatright |
fr |
内联块级 |
inlineblock |
ib |
文本居中 |
textaligncenter |
tac |
文本居右 |
textalignright |
tar |
文本居左 |
textalignleft |
tal |
垂直居中 |
verticalalignmiddle |
vam |
溢出隐藏 |
overflowhidden |
oh |
完全消失 |
displaynone |
dn |
字体大小 |
fontsize |
fs |
字体粗细 |
fontweight |
fw |
皮肤（.s-）
语义 |
命名 |
简写 |
|---|---|---|
字体颜色 |
fontcolor |
fc |
背景 |
background |
bg |
背景颜色 |
backgroundcolor |
bgc |
背景图片 |
backgroundimage |
bgi |
背景定位 |
backgroundposition |
bgp |
边框颜色 |
bordercolor |
bdc |
状态（.z-）
语义 |
命名 |
简写 |
|---|---|---|
选中 |
selected |
sel |
当前 |
current |
crt |
显示 |
show |
show |
隐藏 |
hide |
hide |
打开 |
open |
open |
关闭 |
close |
close |
出错 |
error |
err |
不可用 |
disabled |
dis |