小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

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 命名建议着重参考 bemcss.com/

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="">
     			<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>

常用命名推荐

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容器，包，一般用于最外层

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