BEM 是一種用于編寫可維護(hù) HTML 和 CSS 的命名規(guī)范。1. Block 是獨(dú)立、可復(fù)用的組件，如 .menu 或 .button，應(yīng)語義化命名；2. Element 是 Block 的組成部分，命名如 .menu__item，不可單獨(dú)存在且不應(yīng)嵌套過深；3. Modifier 表示狀態(tài)或變體，如 .button--primary，應(yīng)僅定義差異樣式并避免復(fù)雜組合；BEM 提升命名清晰度、減少沖突、便于維護(hù)并統(tǒng)一團(tuán)隊(duì)結(jié)構(gòu)。
BEM (Block, Element, Modifier) 是一種用于編寫可維護(hù)、結(jié)構(gòu)清晰的 HTML 和 CSS 的命名規(guī)范。它特別適用于大型項(xiàng)目或團(tuán)隊(duì)協(xié)作，能幫助開發(fā)者更清晰地理解組件之間的關(guān)系。
什么是 Block（塊）？
Block 是一個獨(dú)立的、可復(fù)用的部分，比如一個按鈕、導(dǎo)航欄或者搜索框。它可以單獨(dú)存在，不依賴其他組件。
- 命名方式：
block-name - 示例：
.menu,.button
重點(diǎn)： Block 應(yīng)該是語義化的，描述它是什么而不是它看起來怎么樣。比如 .search-form 比 .blue-box 更合適。
Element（元素）是什么？
Element 是 Block 的一部分，不能脫離 Block 單獨(dú)存在。比如菜單項(xiàng)是菜單的一部分，按鈕里的圖標(biāo)也是按鈕的元素。
- 命名方式：
block-name__element-name - 示例：
.menu__item,.button__icon
常見誤區(qū)：
- 不要嵌套太多層級，比如
.block__elem1__elem2是不推薦的。 - Element 只屬于一個 Block，不要跨 Block 使用。
Modifier（修飾符）的作用
Modifier 用來表示 Block 或 Element 的狀態(tài)或變體，比如“禁用”、“大號”、“紅色”等樣式變化。
- 命名方式：
block-name--modifier或block-name__element-name--modifier - 示例：
.button--primary,.menu__item--active
使用建議：
- Modifier 應(yīng)該只定義與默認(rèn)狀態(tài)不同的樣式，避免重復(fù)代碼。
- 可以用多個 Modifier 組合，但注意命名沖突和復(fù)雜度控制。
BEM 為什么有用？
在多人協(xié)作或長期維護(hù)的項(xiàng)目中，BEM 提供了以下好處：
- 命名清晰： 看名字就知道這個類屬于哪個模塊。
- 減少樣式?jīng)_突： 類名唯一性更強(qiáng)，不容易出現(xiàn)全局污染。
- 便于維護(hù)： 修改樣式時更容易定位影響范圍。
- 結(jié)構(gòu)一致： 團(tuán)隊(duì)成員可以統(tǒng)一寫法，降低溝通成本。
雖然 BEM 的類名看起來有點(diǎn)長，但它帶來的可讀性和穩(wěn)定性遠(yuǎn)比簡短更重要。
基本上就這些。剛開始可能會覺得有點(diǎn)啰嗦，但一旦習(xí)慣，你會發(fā)現(xiàn)它讓前端開發(fā)變得更有序也更可控。
以上是什么是BEM（塊，元素，修飾符）方法論？的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
如何使用PHP和Angular進(jìn)行前端開發(fā)
May 11, 2023 pm 04:04 PM
隨著互聯(lián)網(wǎng)的飛速發(fā)展，前端開發(fā)技術(shù)也在不斷改進(jìn)和迭代。PHP和Angular是兩種廣泛應(yīng)用于前端開發(fā)的技術(shù)。PHP是一種服務(wù)器端腳本語言，可以處理表單、生成動態(tài)頁面和管理訪問權(quán)限等任務(wù)。而Angular是一種JavaScript的框架，可以用于開發(fā)單頁面應(yīng)用和構(gòu)建組件化的Web應(yīng)用程序。本篇文章將介紹如何使用PHP和Angular進(jìn)行前端開發(fā)，以及如何將它們
提升網(wǎng)站速度的關(guān)鍵優(yōu)化模式，每個前端開發(fā)者都必須掌握！
Feb 02, 2024 pm 05:36 PM
前端開發(fā)者必備：掌握這些優(yōu)化模式，讓網(wǎng)站飛起來！隨著互聯(lián)網(wǎng)的快速發(fā)展，網(wǎng)站已經(jīng)成為企業(yè)宣傳和交流的重要渠道之一。一個性能優(yōu)良、加載迅速的網(wǎng)站不僅可以提升用戶體驗(yàn)，還可以吸引更多的訪問者。作為一名前端開發(fā)者，掌握一些優(yōu)化模式是必不可少的。本文將介紹一些常用的前端優(yōu)化技術(shù)，幫助開發(fā)者更好地優(yōu)化網(wǎng)站。壓縮文件在網(wǎng)站開發(fā)中，經(jīng)常使用的文件類型包括HTML、CSS和J
到底Django是適合前端還是后端開發(fā)？
Jan 19, 2024 am 09:50 AM
Django是一款使用Python構(gòu)建的Web應(yīng)用程序框架，它可以幫助開發(fā)人員快速構(gòu)建高質(zhì)量的Web應(yīng)用程序。Django在開發(fā)過程中通常會涉及到前端和后端兩個方面，但到底Django更適合哪一方面的開發(fā)呢？本文將探討Django在前端和后端開發(fā)中的優(yōu)勢，并提供具體的代碼示例。Django在后端開發(fā)中的優(yōu)勢Django作為一款后端框架，它具有很多優(yōu)勢，下面分
學(xué)會利用sessionstorage，提高前端開發(fā)效率
Jan 13, 2024 am 11:56 AM
掌握sessionStorage的作用，提升前端開發(fā)效率，需要具體代碼示例隨著互聯(lián)網(wǎng)的快速發(fā)展，前端開發(fā)領(lǐng)域也日新月異。在進(jìn)行前端開發(fā)時，我們經(jīng)常需要處理大量的數(shù)據(jù)，并將其存儲在瀏覽器中以便后續(xù)使用。而sessionStorage就是一種非常重要的前端開發(fā)工具，可以為我們提供臨時的本地存儲解決方案，提高開發(fā)效率。本文將介紹sessionStorage的作用，
Golang前端新趨勢：解讀Golang在前端開發(fā)中的應(yīng)用前景
Mar 20, 2024 am 09:45 AM
Golang前端新趨勢：解讀Golang在前端開發(fā)中的應(yīng)用前景近年來，前端開發(fā)領(lǐng)域發(fā)展迅猛，各種新技術(shù)層出不窮，而Golang作為一種快速、可靠的編程語言，也開始在前端開發(fā)中嶄露頭角。Golang（也稱為Go）是由Google開發(fā)的一種編程語言，以其高效的性能、簡潔的語法和強(qiáng)大的功能而聞名，逐漸受到前端開發(fā)者的青睞。本文將探討Golang在前端開發(fā)中的應(yīng)用前
JavaScript的演變：當(dāng)前的趨勢和未來前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趨勢包括TypeScript的崛起、現(xiàn)代框架和庫的流行以及WebAssembly的應(yīng)用。未來前景涵蓋更強(qiáng)大的類型系統(tǒng)、服務(wù)器端JavaScript的發(fā)展、人工智能和機(jī)器學(xué)習(xí)的擴(kuò)展以及物聯(lián)網(wǎng)和邊緣計(jì)算的潛力。
HTML，CSS和JavaScript：Web開發(fā)人員的基本工具
Apr 09, 2025 am 12:12 AM
HTML、CSS和JavaScript是Web開發(fā)的三大支柱。1.HTML定義網(wǎng)頁結(jié)構(gòu)，使用標(biāo)簽如、等。2.CSS控制網(wǎng)頁樣式，使用選擇器和屬性如color、font-size等。3.JavaScript實(shí)現(xiàn)動態(tài)效果和交互，通過事件監(jiān)聽和DOM操作。
前端開發(fā)中的JavaScript異步請求與數(shù)據(jù)處理經(jīng)驗(yàn)總結(jié)
Nov 03, 2023 pm 01:16 PM
前端開發(fā)中的JavaScript異步請求與數(shù)據(jù)處理經(jīng)驗(yàn)總結(jié)在前端開發(fā)中，JavaScript是一門非常重要的語言，它不僅可以實(shí)現(xiàn)頁面的交互和動態(tài)效果，還可以通過異步請求獲取和處理數(shù)據(jù)。在這篇文章中，我將總結(jié)一些在處理異步請求和數(shù)據(jù)時的經(jīng)驗(yàn)和技巧。一、使用XMLHttpRequest對象進(jìn)行異步請求XMLHttpRequest對象是JavaScript用于發(fā)送
