前端开发规范（二）——CSS & 命名规范

css规范

代码规范

1、代码格式化

• 紧凑格式

.jdc{display: block; width: 50px;}

• 展开格式

.jdc {
    display: block;
    width: 50px;
}

2、代码大小写

• 样式选择器，属性名，属性值关键字全部使用小写字母书写

/* 不推荐 */
.JDC {
    DISPLAY: BLOCK;
}

/* 推荐 */
.jdc {
    display: block;
}

3、选择器

• 尽量少使用通用选择器*
• 不使用ID选择器
• 不使用无具体语义定义的标签选择器

/* 不推荐 */
*{}
#jdc{}
.jdc div{}

/* 推荐 */
.jdc {}
.jdc li {}
.jdc .wrapper {}

4、分号

• 每个属性声明末尾都要加分号

.jdc {
    width: 100%;
    height: 100%;
}

5、代码易读性

• 左括号与类名之间一个空格，冒号与属性值之间一个空格

/* 不推荐 */
.jdc{
    width:100%;
}

/* 推荐 */
.jdc {
    width: 100%;
}

• 逗号分隔的取值，逗号之后一个空格

/* 不推荐 */
.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

/* 推荐 */
.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

• 为单个css选择器或新申明开启新行

/* 不推荐 */
.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

/* 推荐 */
.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

• 颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

/* 不推荐 */
.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

/* 推荐 */
.jdc {
    color: rgba(255,255,255,.5);
}

• 不要为 0 指明单位

/* 不推荐 */
.jdc {
    margin: 0px 10px;
}

/* 推荐 */
.jdc {
    margin: 0 10px;
}

6、属性书写顺序

• 布局定位属性：display / position / float / clear / visibility / overflow

• 自身属性：width / height / margin / padding / border / background

• 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word

• 其他属性（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;
}

7、CSS3 私有前缀写法

• 私有前缀在前，标准前缀在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

注释规范

1、单行注释

• 注释内容第一个字符和最后一个字符都是一个空格字符，单独占一行，行与行之间相隔一行

/*不推荐*/
/*Comment Text*/
.jdc{
	display: block;
}
.jdc{
	display: block;/*Comment Text*/
}

/* 推荐 */
/* Comment Text */
.jdc{}

/* Comment Text */
.jdc{}

2、模块注释

• 注释内容第一个字符和最后一个字符都是一个空格字符，/* 与 模块信息描述占一行，多个横线分隔符-与*/占一行，行与行之间相隔两行

/*不推荐*/
/* Module A ---------------------------------------------------- */
.jda {}
/* Module B ---------------------------------------------------- */
.jdb {}

/* 推荐 */

/* Module A
---------------------------------------------------------------- */
.jda {}

/* Module B
---------------------------------------------------------------- */
.jdb {}

命名规范

HTML/CSS 文件命名

确保文件命名总是以字母开头而不是数字，使用小驼峰格式

<!-- HTML -->
jdc.html
jdcList.html
jdcDetail.html

<!-- CSS -->
jdc.css
jdcList.css
jdcDetail.css

ClassName 命名

建议着重参考 https://bemcss.com/

ClassName的命名应该尽量精短、明确，必须以字母开头命名，且全部字母为小写，单词之间统一使用下划线 “-” 连接

1. 命名原则

• 基于姓氏命名法（继承 + 外来）

• 在子孙模块数量可预测的情况下，严格继承祖先模块的命名前缀
  | | |
  | ------------ | ------------ |
  | | |

  <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="">
     			<div class="modulename-info-user-img-tit"></div>
     			<div class="modulename-info-user-img-txt"></div>
     			...
     		</div>
     	</div>
     	<div class="modulename-info-list"></div>
 	</div>
 </div>

  /* 推荐 */
     <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>

2. 常用命名推荐

• ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName，因为有些浏览器插件（Chrome的广告拦截插件等）会直接过滤这些类名，因此
• 敏感不和谐字眼也不应该出现，如：fuck、jer、sm、ass等

about 关于
account 账户
arrow 箭头图标
article文章
aside边栏
audio音频
avatar头像
bg,background背景
bar栏（工具类）
branding品牌化
crumb,breadcrums面包屑
btn,button按钮
caption标题，说明
category分类
chart图表
clearfix清除浮动
close关闭
col,column列
comment评论
community社区
container容器
content内容
copyright版权
current当前态，选中态
default默认
description描述
details细节
disabled不可用
entry文章，博文
error错误
even偶数，常用于多行列表或表格中
fail失败（提示）
feature专题
fewer收起
field用于表单的输入区域
figure图
filter筛选
first第一个，常用于列表中
footer页脚
forum论坛
gallery画廊
group模块，清除浮动
header页头
help帮助
hide隐藏
hightlight高亮
home主页
icon图标
info,information信息
last最后一个，常用于列表中
links链接
login登录
logout退出
logo标志
main主体
menu菜单
meta作者、更新时间等信息栏，一般位于标题之下
module模块
more更多（展开）
msg,message消息
nav,navigation导航
next下一页
nub小块
odd奇数，常用于多行列表或表格中
off鼠标离开
on鼠标移过
output输出
pagination分页
pop,popup弹窗
preview预览
previous上一页
primary主要
progress进度条
promotion促销
rcommd,recommendations推荐
reg,register注册
save保存
search搜索
secondary次要
section区块
selected已选
share分享
show显示
sidebar边栏，侧栏
slide幻灯片，图片切换
sort排序
sub次级的，子级的
submit提交
subscribe订阅
subtitle副标题
success成功（提示）
summary摘要
tab标签页
table表格
txt,text文本
thumbnail缩略图
time时间
tips提示
title标题
video视频
wrap容器，包，一般用于最外层
wrapper容器，包，一般用于最外层