CSS規範BEM CSS和OOCSS
前言
在專案開發中,由於每個人的程式碼習慣不同,編寫出來的css程式碼不夠結構化,整潔度和語義化欠缺。BEM CSS和OOCSS的思想大家在日常編碼中一定有所用到,只是沒有系統的瞭解和完全規範的使用。
BEM(Block,Element,Modifier) CSS
介紹
BEM是一種前端命名規範,顧名思議就是將頁面拆分成每一個富有語義的塊,塊和塊可以巢狀,用連線符代表各模組之間的關係以及元素狀態,生成一種模組化、可複用、高可維護性和結構化的CSS程式碼。
block | element |
modifier(修飾語) |
獨立且有意義的實體,e.g. checkbox ,etc. |
Block的一部分且沒有獨立的意義, |
Blocks或Elements的一種標誌,可以用它改變其表現形式、行為、狀態 |
命名規則
通過雙下劃線__連線後代block或者element,用雙連字元--連線修飾語。
我們完全可以通過css還原出html程式碼結構
結論
程式設計師最大的困難是什麼==>起名,日常開發中我們也遇到自己的樣式被其他人覆蓋了,大部分原因出在命名衝突,BEM恰恰解決了這一痛點,我們只需要外層樣式名是一個有意義且獨立唯一,他的後代就可以放心的用content,title等連線。(媽媽再也不用擔心我不會起名了)
優點:結構清晰,語義化。
缺點:如果html結構巢狀比較深會導致類名比較長。
OOCSS(Object Oriented CSS)
介紹
OOCSS並不是一種約定的命名規範,是一種面向物件的思想,面向物件我們並不陌生,將模組抽象成物件,其核心就是用最簡單的方式編寫最整潔,最於淨的CSS程式碼,從而使程式碼更具重用性,可維護性和可擴充套件性。
核心思想:
- 減少對 HTML 結構的依賴
- 增加 CSS class 重用
原則
減少對 HTML 結構的依賴
一般的導航欄寫法,如果要對那些 <a>
標籤定義樣式,CSS 的寫法可能寫成 .nav__main ul li a {}
,這種寫法先不管效能上的問題,可以看出來過度地依賴元素標籤的結構,有可能之後 HTML 結構改變,這個 CSS 就必須跟著重構,造成維護上多餘的成本,OOCSS提倡給a標籤加上class .nav__main__item
增加 CSS class 重複性的使用
在使用OOCSS之前我們寫一個樣式可能是這樣的,這樣寫的弊端是隨處可見的重複程式碼,維護起來特別麻煩。
我們可以通過分析抽象出他們共有的樣式,因此提出了一個可重用的字型樣式。
結論
OOCSS最重要的是從專案的頁面中分析抽象出“物件”元件,並給這些物件建立CSS規則進行完善,然後無論是在專案中新建頁面還是在模組中新增元素,只須重寫少量的甚至不寫任何樣式。
BEM和OOCSS的結合
我們開發一個顯示物品重量元件,我們平常寫的程式碼可能是這樣的。
看起來沒什麼毛病,但是無論是可維護性,簡潔度都非常的差。如果我們使用BEM和OCCSS我們可以將我們的程式碼變成這樣。
相對於前種方案,命名比較冗長,但是保證CSS類名不會重複的,樣式不依賴html結構,複用class,正是BEM和OOCSS的核心思想。
總結
BEM是一種命名規範,OOCSS是CSS的設計思想,其實BEM也用到了OOCSS的思想。
CSS 程式碼的數量愈發龐大,開發團隊的規模也相應擴大。在 CSS 開發團隊中需要一個統一和固定的 CSS 程式碼組織和管理規範,若有不足之處歡迎大家補充。