溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容主要講解“BEM的命名規范有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“BEM的命名規范有哪些”吧!
什么是BEM命名規范
Bem是塊（block）、元素（element）、修飾符（modifier）的簡寫，由Yandex團隊提出的一種前端CSS命名方法論。
BEM是一個簡單又非常有用的命名約定。讓你的前端代碼更容易閱讀和理解，更容易協作，更容易控制，更加健壯和明確，而且更加嚴密。
BEM命名約定的模式是：
.block{}
.block__element{}
.block--modifier{}
?block代表了更高級別的抽象或組件。
?block__element代表.block的后代，用于形成一個完整的.block的整體。
?block--modifier代表.block的不同狀態或不同版本。
使用兩個連字符和下劃線而不是一個，是為了讓你自己的塊可以用單個連字符來界定。如：
.sub-block__element{}
.sub-block--modifier{}
BEM命名法的好處
BEM的關鍵是，可以獲得更多的描述和更加清晰的結構，從其名字可以知道某個標記的含義。于是，通過查看HTML代碼中的class屬性，就能知道元素之間的關聯。
常規的命名法示例：
復制代碼
<divclass="article">
<divclass="body">
<buttonclass="button-primary"></button>
<buttonclass="button-success"></button>
</div>
</div>
復制代碼
這種寫法從DOM結構和類命名上可以了解每個元素的意義，但無法明確其真實的層級關系。在css定義時，也必須依靠層級選擇器來限定約束作用域，以避免跨組件的樣式污染。
到此，相信大家對“BEM的命名規范有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
