很多开发者觉得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{
}
//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;
}
下面通过完整的代码实例编程体现完整的思想。