CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解
我要評(píng)論前言
在項(xiàng)目開(kāi)發(fā)中，由于每個(gè)人的代碼習(xí)慣不同，編寫出來(lái)的css代碼不夠結(jié)構(gòu)化，整潔度和語(yǔ)義化欠缺。BEM CSS和OOCSS的思想大家在日常編碼中一定有所用到，只是沒(méi)有系統(tǒng)的了解和完全規(guī)范的使用。
BEM(Block, Element, Modifier) CSS 介紹
BEM是一種 前端命名規(guī)范 ，顧名思議就是將頁(yè)面拆分成每一個(gè)富有語(yǔ)義的塊，塊和塊可以嵌套，用 連接符 代表各模塊之間的關(guān)系以及元素狀態(tài)，生成一種模塊化、可復(fù)用、高可維護(hù)性和結(jié)構(gòu)化的CSS代碼。
| block |
element |
modifier（修飾語(yǔ)） |
|
獨(dú)立且有意義的實(shí)體, e.g. header , container , menu , checkbox , etc. |
Block的一部分且沒(méi)有獨(dú)立的意義, header title , menu item , list item , etc. |
Blocks或Elements的一種標(biāo)志，可以用它改變其表現(xiàn)形式、行為、狀態(tài) disabled , checked , fixed |
命名規(guī)則
通過(guò)雙下劃線__連接后代block或者element ,用雙連字符--連接修飾語(yǔ)。
我們完全可以通過(guò)css還原出html代碼結(jié)構(gòu)
結(jié)論
程序員最大的困難是什么==>起名，日常開(kāi)發(fā)中我們也遇到自己的樣式被其他人覆蓋了，大部分原因出在命名沖突，BEM恰恰解決了這一痛點(diǎn),我們只需要外層樣式名是一個(gè)有意義且獨(dú)立唯一，他的后代就可以放心的用content,title等連接。（媽媽再也不用擔(dān)心我不會(huì)起名了）
優(yōu)點(diǎn)：結(jié)構(gòu)清晰，語(yǔ)義化。
缺點(diǎn)：如果html結(jié)構(gòu)嵌套比較深會(huì)導(dǎo)致類名比較長(zhǎng)。
OOCSS（Object Oriented CSS） 介紹
OOCSS并不是一種約定的命名規(guī)范，是一種面向?qū)ο蟮乃枷?，面向?qū)ο笪覀儾⒉荒吧?，將模塊抽象成對(duì)象，其核心就是用最簡(jiǎn)單的方式編寫最整潔，最于凈的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 {} ，這種寫法先不管效能上的問(wèn)題，可以看出來(lái)過(guò)度地依賴元素標(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è)樣式可能是這樣的,這樣寫的弊端是隨處可見(jiàn)的重復(fù)代碼，維護(hù)起來(lái)特別麻煩。
我們可以通過(guò)分析抽象出他們共有的樣式,因此提出了一個(gè)可重用的字體樣式。
結(jié)論
OOCSS最重要的是從項(xiàng)目的頁(yè)面中分析抽象出“對(duì)象”組件，并給這些對(duì)象創(chuàng)建CSS規(guī)則進(jìn)行完善，然后無(wú)論是在項(xiàng)目中新建頁(yè)面還是在模塊中添加元素，只須重寫少量的甚至不寫任何樣式。
BEM和OOCSS的結(jié)合
我們開(kāi)發(fā)一個(gè)顯示物品重量組件,我們平常寫的代碼可能是這樣的。
看起來(lái)沒(méi)什么毛病，但是無(wú)論是可維護(hù)性，簡(jiǎn)潔度都非常的差。如果我們使用BEM和OCCSS我們可以將我們的代碼變成這樣。
相對(duì)于前種方案，命名比較冗長(zhǎng)，但是保證CSS類名不會(huì)重復(fù)的，樣式不依賴html結(jié)構(gòu)，復(fù)用class，正是BEM和OOCSS的核心思想。
總結(jié)
BEM是一種命名規(guī)范，OOCSS是CSS的設(shè)計(jì)思想，其實(shí)BEM也用到了OOCSS的思想。
CSS 代碼的數(shù)量愈發(fā)龐大，開(kāi)發(fā)團(tuán)隊(duì)的規(guī)模也相應(yīng)擴(kuò)大。在 CSS 開(kāi)發(fā)團(tuán)隊(duì)中需要一個(gè)統(tǒng)一和固定的 CSS 代碼組織和管理規(guī)范，若有不足之處歡迎大家補(bǔ)充。
到此這篇關(guān)于CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解的文章就介紹到這了,更多相關(guān)CSS規(guī)范BEM CSS和OOCSS內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS使用BEM命名規(guī)范實(shí)踐,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-28
CSS樣式書寫順序和命名規(guī)范及注意事項(xiàng)
這篇文章主要介紹了CSS樣式書寫順序和命名規(guī)范,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-04值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-19
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間
Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。下面通過(guò)本文給大家?guī)?lái)了CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間的相關(guān)知識(shí)，感興趣的朋友一起2018-01-23css 命名：BEM, scoped css, css modules 與 css-in-js詳解
這篇文章主要介紹了css 命名：BEM, scoped css, css modules 與 css-in-js的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，,需要的朋友2020-08-24- BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。本文主要介紹了詳解css BEM書寫規(guī)范,非常具有實(shí)用價(jià)值，需要的2018-12-17
從QQtabBar看css命名規(guī)范BEM的詳細(xì)介紹
這篇文章主要介紹了從QQtabBar看css命名規(guī)范BEM的問(wèn)題解析，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-08-04
