OOCSS(面向对象的css)

最新推荐文章于 2019-04-22 22:41:20 发布

转载最新推荐文章于 2019-04-22 22:41:20 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

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

文章标签：

#前端 #面试 #ViewUI

本文探讨了OOCSS（面向对象的CSS）的概念及其在前端开发中的应用，通过实例对比了传统CSS写法与OOCSS的区别，强调了代码复用性和维护性的提升。

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

最近看了几个大牛的面试经历，再次刺激了我的危机恐慌感，加班回家之后坚持着看了某机构的前端公开课，听到一个先进的词语（其实是自己落后了）——OOCSS，即面向对象的CSS，是不是听起来很高端，CSS这种语言都可以面向对象了么，那岂不是全世界都是对象，让广大单身狗如何自处！哈哈哈

，一直超火的小鸡

什么是OOCSS？

实现出场的是OOCSS之爸爸——Nicole Sullivan，好，其实只是个过场动画！其实OOCSS不是一个框架，也不是一种技术，更不是一种新的语言，他只不过是一种方法，使得我们书写更简洁的css代码，毕竟样式有时候调起来也可以把你坑哭了。

举个日常大栗子

<div class="size">
    ... ... 此处省略许多代码
</div>

.size {
    font-family: 'PIXELLCD7';    src: url('../fonts/PIXELLCD7.ttf');    color: #028c87;
    font-size:14px;
    display: flex;    flex-direction: row;    justify-content:flex-start;
    border:1px rgb(0, 255, 247) solid;    box-shadow: rgb(0, 255, 247) 0px 0px 10px inset;
}	复制代码

这就很不OOCSS，因为你将全部属性都放在一起了，这相当于一个大杂烩，而不是一个一个的对象，而应该是下面这样，将混在一起的变量拆分成可独立组合的对象，这样方便复用的同时，也可降低维护成本

/* css全局定义主要颜色变量 */
:root{    --iot_light: #00ffff;    --iot_dark: #028c87;    --iot_cancel:#EA6948;    --iot_confirm:#2BAA3F;    --iot_yellow: rgb(238,216,65);}
/* 全局字体样式 */@font-face {    font-family: 'PIXELLCD7';    src: url('../fonts/PIXELLCD7.ttf');}/* 布局样式 */.flex-row{    display: flex;    flex-direction: row;    justify-content:flex-start;}/* border发光 */.boxShadow{    box-shadow: rgb(0, 255, 247) 0px 0px 10px inset;}.font-normal{
    font-size:14px;
}

.font-big{
     font-size:16px;
}复制代码

<div class="flex-row font-normal boxShadow">
    ... ... 此处省略许多代码
</div>复制代码

当然具体怎么拆分还要看项目需求，没有必要每一句css都拆出来，那反而会更加难以维护，详细介绍大家可以参考大漠老师的详细介绍：www.w3cplus.com/css/oocss-c…

最近加班太多，体力精力明显不足，文章到此，感谢阅读，希望能给您带来收获！