CSS規(guī)范BEMCSS和OOCSS的示例分析

這篇文章主要介紹CSS規(guī)范BEMCSS和OOCSS的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

BEM(Block, Element, Modifier) CSS 介紹

BEM是一種 前端命名規(guī)范 ，顧名思議就是將頁面拆分成每一個(gè)富有語義的塊，塊和塊可以嵌套，用 連接符 代表各模塊之間的關(guān)系以及元素狀態(tài)，生成一種模塊化、可復(fù)用、高可維護(hù)性和結(jié)構(gòu)化的CSS代碼。

命名規(guī)則

通過雙下劃線__連接后代block或者element ,用雙連字符--連接修飾語。

我們完全可以通過css還原出html代碼結(jié)構(gòu)

結(jié)論

程序員最大的困難是什么==>起名，日常開發(fā)中我們也遇到自己的樣式被其他人覆蓋了，大部分原因出在命名沖突，BEM恰恰解決了這一痛點(diǎn),我們只需要外層樣式名是一個(gè)有意義且獨(dú)立唯一，他的后代就可以放心的用content,title等連接。（媽媽再也不用擔(dān)心我不會(huì)起名了）

優(yōu)點(diǎn)：結(jié)構(gòu)清晰，語義化。

缺點(diǎn)：如果html結(jié)構(gòu)嵌套比較深會(huì)導(dǎo)致類名比較長。

OOCSS（Object Oriented CSS） 介紹

OOCSS并不是一種約定的命名規(guī)范，是一種面向?qū)ο蟮乃枷耄嫦驅(qū)ο笪覀儾⒉荒吧?，將模塊抽象成對(duì)象，其核心就是用最簡單的方式編寫最整潔，最于凈的CSS代碼，從而使代碼更具重用性，可維護(hù)性和可擴(kuò)展性。

核心思想：

• 減少對(duì) HTML 結(jié)構(gòu)的依賴

• 增加 CSS class 重用

原則

減少對(duì) HTML 結(jié)構(gòu)的依賴

一般的導(dǎo)航欄寫法，如果要對(duì)那些 <a> 標(biāo)簽定義樣式，CSS 的寫法可能寫成 .nav__main ul li a {} ，這種寫法先不管效能上的問題，可以看出來過度地依賴元素標(biāo)簽的結(jié)構(gòu)，有可能之后 HTML 結(jié)構(gòu)改變，這個(gè) CSS 就必須跟著重構(gòu)，造成維護(hù)上多余的成本,OOCSS提倡給a標(biāo)簽加上class .nav__main__item 。

增加 CSS class 重復(fù)性的使用

在使用OOCSS之前我們寫一個(gè)樣式可能是這樣的,這樣寫的弊端是隨處可見的重復(fù)代碼，維護(hù)起來特別麻煩。

我們可以通過分析抽象出他們共有的樣式,因此提出了一個(gè)可重用的字體樣式。

結(jié)論

OOCSS最重要的是從項(xiàng)目的頁面中分析抽象出“對(duì)象”組件，并給這些對(duì)象創(chuàng)建CSS規(guī)則進(jìn)行完善，然后無論是在項(xiàng)目中新建頁面還是在模塊中添加元素，只須重寫少量的甚至不寫任何樣式。

BEM和OOCSS的結(jié)合

我們開發(fā)一個(gè)顯示物品重量組件,我們平常寫的代碼可能是這樣的。

看起來沒什么毛病，但是無論是可維護(hù)性，簡潔度都非常的差。如果我們使用BEM和OCCSS我們可以將我們的代碼變成這樣。

相對(duì)于前種方案，命名比較冗長，但是保證CSS類名不會(huì)重復(fù)的，樣式不依賴html結(jié)構(gòu)，復(fù)用class，正是BEM和OOCSS的核心思想。

以上是“CSS規(guī)范BEMCSS和OOCSS的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！