溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css中BEM怎么書寫規范”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“css中BEM怎么書寫規范”文章能幫助大家解決問題。
BEM是基于組件的web開發方法。其思想是將用戶界面分隔為獨立的塊，從而使開發復雜的UI界面變得更簡單和快，且不需要粘貼復制便可復用現有代碼。BEM由Block、Element、Modifier組成。選擇器里用以下連接符擴展他們的關系：
`__：雙下劃線用來連接塊和塊的子元素
` ：僅作為連字符使用，連接塊或元素或修飾符的多個單詞（也可以直接寫成駝峰式）
--：雙中劃線用來連接塊或元素的狀態（也可使用‘_’單下劃線表示）
示例：
block-name_modifier-name block-name__element-name--modifier-name block-name_modifier-name--modifier-value block-name__element-name--modifier-name--modifier-value
基本概念
Block(塊)
代碼片段可能被復用且這段代碼不依賴其他組件即可用Block。塊可以互相嵌套,可以嵌套任意多層。
特點：
塊的名稱用于描述它的目的。如 menu、button
塊不能影響所在環境。這意味著不能為塊設置margin或position
只能使用class命名選擇器，而不能使用標簽或id選擇器
不依賴于頁面內其他塊或元素
Element（元素）
Element是Block的一部分，沒有獨立存在的意義。任何一個Element語義上是和Block綁定的。
特點：
與塊使用'__'連接。 如： block__item
用于描述它的目的。如：item、text
元素可以彼此嵌套,可以嵌套任意多層
元素總是屬于塊的一部分。所以類似于block__item1__item2的命名是不合法的
Modifier（修飾符）
Modifier是Block或Element上的標記。使用它們來改變樣式，行為或狀態。與塊或元素連接符為'--'。
應用
相對另外的Blocks定位Block
最好的方式是混合使用block和element。解決block上不能設置margin、position。
例：
<body class="page">
<!-- header and navigation-->
<header class="header page__header">...</header>
<!-- footer -->
<footer class="footer page__footer">...</footer>
</body>
.page__header {
padding: 20px;
}
.page__footer {
padding: 50px;
}Block內定位Elements
通過額外創建Block的子Element來定位嵌套。
例：
<body class="page">
<div class="page__inner">
<!-- header and navigation-->
<header class="header">...</header>
<!-- footer -->
<footer class="footer">...</footer>
</div>
</body>
.page__inner {
margin-right: auto;
margin-left: auto;
width: 960px;
}關于命名
選擇器的命名必須完整且精確地描述它代表的BEM實體。
例：
.button {}
.button__icon {}
.button__text {}
.button_theme_islands {}我們可直接指導我們在處理一個塊元素。在html使用如：
<button class="button button_theme_islands"> <span class="button__icon"></span> <span class="button__text">...</span> </button>
而下面的css就很難讓我們做出相同的判斷：
.button {}
.icon {}
.text {}
.theme_islands {}css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
關于“css中BEM怎么書寫規范”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
