最近看了幾個大牛的面試經歷,再次刺激了個人危機恐慌感,加班回家以後堅持着看了某機構的前端公開課,聽到一個先進的詞語(實際上是本身落後了)——OOCSS,即面向對象的CSS,是否是聽起來很高端,CSS這種語言均可以面向對象了麼,那豈不是全世界都是對象,讓廣大單身狗如何自處!哈哈哈css
,一直超火的小雞
前端
實現出場的是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…框架
最近加班太多,體力精力明顯不足,文章到此,感謝閱讀,但願能給您帶來收穫!佈局