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…

       最近加班太多，體力精力明顯不足，文章到此，感謝閱讀，但願能給您帶來收穫！