oo css面对对象的编程样式

最新推荐文章于 2025-05-08 09:37:32 发布

转载最新推荐文章于 2025-05-08 09:37:32 发布 · 75 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a956f836fb9a063475fac6b

本文介绍了一种将CSS作为面向对象编程的语言来使用的最佳实践方法，这种方法能够显著提高代码的可维护性和重用性，同时减少代码体积并提高渲染效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

很多开发者觉得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选择器，权重太好，无法复用。

代码实践

下面通过完整的代码实例编程体现完整的思想。