CSS規范BEMCSS和OOCSS的示例分析

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

成都創新互聯公司是一家專業提供綏江企業網站建設,專注與做網站、成都網站制作、H5網站設計、小程序制作等業務。10年已為綏江眾多企業、政府機構等服務。創新互聯專業網絡公司優惠進行中。

BEM(Block, Element, Modifier) CSS 介紹

BEM是一種 前端命名規范，顧名思議就是將頁面拆分成每一個富有語義的塊，塊和塊可以嵌套，用連接符代表各模塊之間的關系以及元素狀態，生成一種模塊化、可復用、高可維護性和結構化的CSS代碼。

block	element	modifier（修飾語）
獨立且有意義的實體, e.g. header , container , menu , checkbox , etc.	Block的一部分且沒有獨立的意義, header title , menu item , list item , etc.	Blocks或Elements的一種標志，可以用它改變其表現形式、行為、狀態 disabled , checked , fixed

命名規則

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

CSS規范BEMCSS和OOCSS的示例分析

我們完全可以通過css還原出html代碼結構

結論

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

優點：結構清晰，語義化。

缺點：如果html結構嵌套比較深會導致類名比較長。

OOCSS（Object Oriented CSS）介紹

OOCSS并不是一種約定的命名規范，是一種面向對象的思想，面向對象我們并不陌生，將模塊抽象成對象，其核心就是用最簡單的方式編寫最整潔，最于凈的CSS代碼，從而使代碼更具重用性，可維護性和可擴展性。

核心思想：

減少對 HTML 結構的依賴
增加 CSS class 重用

原則

減少對 HTML 結構的依賴

CSS規范BEMCSS和OOCSS的示例分析

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

增加 CSS class 重復性的使用