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