一、面向对象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）