oo-css面对对象的编程样式
前言
很多开发者觉得css很简单，如果有时间更愿意用在学习和研究js上，随着css3推出以及一些css的预处理语言和面对对象的编程css的方式的出现，css已经出现了更多的可变可提高空间。 而面对对象的css是指将可重用的元素样式定义为一个类，而与其对应的元素可以看成一个实例。这个类也支持继承，多态等，在大型项目中，为了降低维护成本，建议使用这样的方式。
作用以及注意事项
作用
- 增强代码可维护性
- 减少代码体积
- 提高渲染效率
- 组件库思想，栅格布局复用，减少选择器，方便扩展
注意事项
- 不要直接定义子节点所有样式，应该把共性申明到父类（子节点和父类存在必然捆绑关系，不是容器与组件的关系，而是组件内部的处理）
//bad codes(每个子节点都定义同一字号)
.m-section .inner1{font-size:12px}
.m-section .inner2{font-size:12px}
// better codes
.m-section{
font-size:12px;}- 结构和皮肤相分离，控制结构以及基本样式的类与控制皮肤样式的类分离
//bad codes
<div class="m-demo">
.m-demo{
border:1px solid gray;
background:#e5e5e5;
}
// better codes
<div class="m-demo skin">
.m-demo{
border:1px solid gray;
}
.skin{
background:#e5e5e5;
}- 容器与内容分离，内容的样式不依赖于外部大容器或者布局环境，应该给出独立的样式。
//bad codes
<div class="container"><ul></ul></div>
.container ul{
}
// better codes
<div class="container"><ul class="ranklist"></ul></div>
.container{
}
.ranklist{
}- 抽象出可重用的元素，建立组件库思想，发现页面可重用元素，用可重用元素拼接页面。
//bad codes
<div class="container">
<section class="sec-a"></section>
<section class="sec-b"></section>
<section class="sec-c"></section>
</div>
.container {
}
.container .sec-a {
}
.container .sec-b {
}
.container .sec-c {
}
// better codes
<div class="container">
<section class="sec-primary"></section>
<section class="sec-primary"></section>
<section class="sec-special"></section>
</div>
.container {
}
.sec-primary{
}
.sec-special{
}- 对象本身的样式向对象本身添加class而不是对父类添加。
//bad codes(只有这个模块需要添加字体颜色以及向上间距)
<div class="m-demo">
<section class="price"></section>
</div>
.m-demo {
padding-top:20px;
color:#005;
}
.m-demo .price {
}
// better codes
<div class="m-demo">
<section class="price"></section>
</div>
.m-demo {
}
.m-demo .price{
color:#005;
margin-top:20px;
}- 对象保持独立性。(可复用的独立性,与前面的共性申明到父类区分开，这里讲的是类与外部类的关系)
//bad codes(独立模块需要居中，依赖于外部容器)
<div class="container">
<section class="m-price"></section>
</div>
.container {
text-align:center;
}
// better codes
<div class="container">
<section class="m-price"></section>
</div>
.m-price{
text-align:center;
}- 避免使用id选择器，权重太好，无法复用。
代码实践
下面通过完整的代码实例编程体现完整的思想。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-12-172，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读