CSS编写规范

一、面向对象CSS（OOCSSS）

OOCSS规则一：结构和皮肤分离

如.btn ， .btn-info ，.btn-warning

.btn {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.btn-info {
color: #ffffff;
background-color: #5bc0de;
border-color: #46b8da;
}

.btn-warning {
color: #ffffff;
background-color: #f0ad4e;
border-color: #eea236;
}

OOCSS规则二：容器和内容分离（不推荐）

.header .btn{
display: inline-block;
margin-bottom: 0;
}

二、单一职责原则

（1）、尽可能拆分成可独立复用的组件

（2）、通过组合方式使用多个组件

实现：可以像面向对象CSS那样实现按钮（btn）、分页等小组件。

三、开闭原则

（1）对扩展开放

（2）对修改关闭

.box{
display: block;
padding: 10px;
}
/*不好的写法*/
.content .box{
padding: 20px;
}
/*较好的写法  扩展*/
.box-large{
padding: 20px;
}

四、命名原则

（1）优先使用基于功能的命名（如btn）

（2）基于内容的命名（如header-content）