一、面向?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）對(duì)擴(kuò)展開放
（2）對(duì)修改關(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)步！