OOCSS(面向对象的css)

        最近看了几个大牛的面试经历，再次刺激了个人危机恐慌感，加班回家以后坚持着看了某机构的前端公开课，听到一个先进的词语（实际上是本身落后了）——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…

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