2个主要的OOCSS原则

把容器的内容分离

1
2
3
4
5
6
7
8
.module {
margin: 10px;
}


.hd {
padding: 5px;
color: #333;
}

1
2
3
<div class="module">
<h1 class="hd">title</h1>
</div>

元素的结构的规则和皮肤应该分开

1
2
3
4
5
6
7
.module {
margin: 10px;
}


.module-sale {
background: #efefef;
}

1
2
3
<div class="module module-sale">
...
</div>