时间：2021-07-01 10:21:17 帮助过：15人阅读
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）
以上就是CSS的书写规范的详细内容，更多请关注Gxl网其它相关文章！