css設(shè)計(jì)模式
oocss
oo:面向?qū)ο?/p>
原則一:容器與內(nèi)容分離
<div class="box1">
<div class="content"></div>
</div>
<div class="box2">
<div class="content"></div>
</div>
<style>
.box1{
...
}
.content{
...
}
</style>
容器box的和內(nèi)容content的樣式的單獨(dú)寫征候,content不要嵌套到box里,這樣才能保證content在哪都能正常復(fù)用
原則二:結(jié)構(gòu)(基礎(chǔ)對(duì)象)與皮膚(對(duì)象)分離
(基礎(chǔ)對(duì)象與對(duì)象分離)
整體結(jié)構(gòu)(基礎(chǔ)對(duì)象)
<div class="main"></div>
.main {
color: red;
font-size: 14px;
}