OOCSS(面向對象的css)

        最近看了幾個大牛的面試經歷,再次刺激了個人危機恐慌感,加班回家以後堅持着看了某機構的前端公開課,聽到一個先進的詞語(實際上是本身落後了)——OOCSS,即面向對象的CSS,是否是聽起來很高端,CSS這種語言均可以面向對象了麼,那豈不是全世界都是對象,讓廣大單身狗如何自處!哈哈哈css

,一直超火的小雞
前端

什麼是OOCSS?

       實現出場的是OOCSS之爸爸——Nicole Sullivan,好,其實只是個過場動畫!其實OOCSS不是一個框架,也不是一種技術,更不是一種新的語言,他只不過是一種方法,使得咱們書寫更簡潔的css代碼,畢竟樣式有時候調起來也能夠把你坑哭了。web

舉個平常大栗子面試

<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,由於你將所有屬性都放在一塊兒了,這至關於一個大雜燴,而不是一個一個的對象,而應該是下面這樣,將混在一塊兒的變量拆分紅可獨立組合的對象,這樣方便複用的同時,也可下降維護成本bash

/* 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…框架

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

相關文章
相關標籤/搜索