css设计模式

css设计模式

oocss

oo:面向对象

原则一:容器与内容分离

<div class="box1">
    <div class="content"></div>
</div>
<div class="box2">
    <div class="content"></div>
</div>
<style>
.box1{
...
}
.content{
...
}
</style>

容器box的和内容content的样式的单独写,content不要嵌套到box里,这样才能保证content在哪都能正常复用

原则二:结构(基础对象)与皮肤(对象)分离

(基础对象与对象分离)

整体结构(基础对象)
<div class="main"></div>
.main {
color: red;
font-size: 14px;
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容