一、面向?qū)ο驝SS（OOCSSS）
OOCSS規(guī)則一：結(jié)構(gòu)和皮膚分離
如.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規(guī)則二：容器和內(nèi)容分離（不推薦）
.header .btn{
display: inline-block;
margin-bottom: 0;
}
二、單一職責(zé)原則
（1）问欠、盡可能拆分成可獨(dú)立復(fù)用的組件
（2）、通過組合方式使用多個(gè)組件
實(shí)現(xiàn)：可以像面向?qū)ο驝SS那樣實(shí)現(xiàn)按鈕（btn）功炮、分頁等小組件溅潜。
三、開閉原則
（1）對擴(kuò)展開放
（2）對修改關(guān)閉
.box{
display: block;
padding: 10px;
}
/*不好的寫法*/
.content .box{
padding: 20px;
}
/*較好的寫法 擴(kuò)展*/
.box-large{
padding: 20px;
}
四薪伏、命名原則
（1）優(yōu)先使用基于功能的命名（如btn）
（2）基于內(nèi)容的命名（如header-content）
作者：王翔 QQ：592767079 Email：wangxianglengye.com 期待共同進(jìn)步滚澜！
