」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > CSS BEM 模型 – 撰寫可擴充且可維護的 CSS 指南

CSS BEM 模型 – 撰寫可擴充且可維護的 CSS 指南

發佈於2024-11-07
瀏覽:212

CSS BEM Model – A Guide to Writing Scalable and Maintainable CSS

CSS BEM 模型 – 编写可扩展和可维护的 CSS 指南

在本文中,我们将深入探讨 BEM(块、元素、修饰符) 方法,这是一种流行的 CSS 命名约定,可帮助您为大型项目编写干净、结构化且可维护的 CSS。 BEM 确保您的代码随着项目的增长保持可扩展性,并减少风格冲突的机会。

1.什么是边界元法?

BEM代表:

  • :本身有意义的独立实体,例如按钮、菜单或表单。
  • 元素:执行特定功能的块的一部分,如按钮标签或菜单项。
  • 修饰符:块或元素的变体或状态,例如禁用的按钮或突出显示的菜单项。

BEM 方法强调创建可重用、可预测和可维护的 CSS 代码。

BEM 命名约定:

.block {}
.block__element {}
.block--modifier {}
  • Block:代表主容器。
  • 元素:跟在块名称后面,用双下划线(__)分隔。
  • 修饰符:跟在块或元素名称后面,用双连字符 (--) 分隔。

2.定义结构

让我们用一个例子来分解BEM的结构。

例子:


在此示例中:

  • :.menu是代表导航菜单的主块。
  • 元素:.menu__list和.menu__item是块内的元素。
  • 修饰符:.menu__item--active是修饰符,指示菜单项的活动状态。

3. BEM 中的块

A 是一个独立的、可重用的组件。将其视为一个独立的实体,可以将其放置在代码中的任何位置,而不必担心其样式受到其他元素的影响。

例子:

.button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
}

这里,.button 是定义按钮组件样式的块。您可以在网站的多个部分重复使用此块。

4. BEM 中的元素

元素是块的一部分,没有独立的含义。它与块绑定并存在以执行与块相关的功能。

例子:

.button__icon {
    margin-right: 10px;
}
.button__label {
    font-size: 14px;
}

这里:

  • .button__icon 是 .button 块中的一个元素,代表按钮中的图标。
  • .button__label 是另一个元素,代表按钮的文本标签。

5. BEM 中的修饰符

A 修饰符表示块或元素的变体。修饰符用于更改组件的外观或行为,例如更改按钮的颜色或使元素更大。

例子:

.button--primary {
    background-color: #2ecc71;
}
.button--large {
    padding: 15px 30px;
}

这里:

  • .button--primary 是更改按钮背景颜色的修饰符。
  • .button--large 是另一个增加按钮大小的修饰符。

修饰符也可以应用于元素:

.button__icon--small {
    width: 10px;
    height: 10px;
}

6。使用 BEM 的好处

  • 可扩展性:BEM 设计为可扩展的,使其成为具有许多组件的大型项目的理想选择。
  • 可重用性:块是独立的,可以在项目的不同部分中重用。
  • 可维护性:BEM 鼓励清晰、一致的命名,使得随着项目的发展更容易维护 CSS。
  • 可预测性:您可以轻松辨别哪些元素属于哪些块,并根据修饰符了解它们的变化。

7. BEM 的实际应用

让我们看一个更完整的示例,其中包括块、元素和修饰符:

HTML:

Card Title

This is a simple card component.

CSS:

/* Block */
.card {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 5px;
}

/* Elements */
.card__header {
    margin-bottom: 15px;
}
.card__title {
    font-size: 18px;
    color: #333;
}
.card__body {
    margin-bottom: 15px;
}
.card__text {
    color: #666;
}
.card__footer {
    text-align: right;
}

/* Modifier */
.card__button--primary {
    background-color: #3498db;
    color: white;
}

在此示例中:

  • .card 是代表整个卡片组件的块。
  • .card__header、.card__title、.card__body 和 .card__footer 是卡片块中的元素。
  • .card__button--primary 是将主要样式应用于卡片内按钮的修饰符。

8. BEM 中要避免的常见错误

  • 嵌套元素过多:避免深层嵌套元素,因为它可能导致不必要的长类名。
  • 不必要的修饰符:仅当需要更改块或元素的外观或状态时才使用修饰符。
  • 将 BEM 与其他命名约定相结合:在整个项目中坚持使用 BEM 以保持一致性。

结论

BEM 方法是保持 CSS 有序、可预测和可扩展的强大方法。通过将组件分解为元素修饰符,您可以保持更清晰的代码并避免样式冲突,从而使您的项目开发更快、更高效成长。


在 LinkedIn 上关注我

里多伊·哈桑

版本聲明 本文轉載於:https://dev.to/ridoy_hasan/css-bem-model-a-guide-to-writing-scalable-and-maintainable-css-o1i?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 在GO中構造SQL查詢時,如何安全地加入文本和值?
    在GO中構造SQL查詢時,如何安全地加入文本和值?
    在go中構造文本sql查詢時,在go sql queries 中,在使用conting and contement和contement consem per時,尤其是在使用integer per當per當per時,per per per當per. [&​​&&&&&&&&&&&&&&&默元組方法在...
    程式設計 發佈於2025-04-29
  • 如何干淨地刪除匿名JavaScript事件處理程序?
    如何干淨地刪除匿名JavaScript事件處理程序?
    刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性,但是當要刪除它們時,可以構成挑戰,而無需替換元素本身就可以替換一個問題。 element? element.addeventlistener(event,function(){/在這里工作/},false); 要解決此問題,請考...
    程式設計 發佈於2025-04-29
  • 解決Spring Security 4.1及以上版本CORS問題指南
    解決Spring Security 4.1及以上版本CORS問題指南
    彈簧安全性cors filter:故障排除常見問題 在將Spring Security集成到現有項目中時,您可能會遇到與CORS相關的錯誤,如果像“訪問Control-allo-allow-Origin”之類的標頭,則無法設置在響應中。為了解決此問題,您可以實現自定義過濾器,例如代碼段中的MyFi...
    程式設計 發佈於2025-04-29
  • 為什麼PHP的DateTime :: Modify('+1個月')會產生意外的結果?
    為什麼PHP的DateTime :: Modify('+1個月')會產生意外的結果?
    使用php dateTime修改月份:發現預期的行為在使用PHP的DateTime類時,添加或減去幾個月可能並不總是會產生預期的結果。正如文檔所警告的那樣,“當心”這些操作的“不像看起來那樣直觀。 考慮文檔中給出的示例:這是內部發生的事情: 現在在3月3日添加另一個月,因為2月在2001年只有2...
    程式設計 發佈於2025-04-29
  • Java為何無法創建泛型數組?
    Java為何無法創建泛型數組?
    通用陣列創建錯誤 arrayList [2]; JAVA報告了“通用數組創建”錯誤。為什麼不允許這樣做? 答案:Create an Auxiliary Class:public static ArrayList<myObject>[] a = new ArrayList<my...
    程式設計 發佈於2025-04-29
  • 如何使用組在MySQL中旋轉數據?
    如何使用組在MySQL中旋轉數據?
    在關係數據庫中使用mySQL組使用mySQL組進行查詢結果,在關係數據庫中使用MySQL組,轉移數據的數據是指重新排列的行和列的重排以增強數據可視化。在這裡,我們面對一個共同的挑戰:使用組的組將數據從基於行的基於列的轉換為基於列。 Let's consider the following ...
    程式設計 發佈於2025-04-29
  • Python中何時用"try"而非"if"檢測變量值?
    Python中何時用"try"而非"if"檢測變量值?
    使用“ try“ vs.” if”來測試python 在python中的變量值,在某些情況下,您可能需要在處理之前檢查變量是否具有值。在使用“如果”或“ try”構建體之間決定。 “ if” constructs result = function() 如果結果: 對於結果: ...
    程式設計 發佈於2025-04-29
  • 如何在Chrome中居中選擇框文本?
    如何在Chrome中居中選擇框文本?
    選擇框的文本對齊:局部chrome-inly-ly-ly-lyly solument 您可能希望將文本中心集中在選擇框中,以獲取優化的原因或提高可訪問性。但是,在CSS中的選擇元素中手動添加一個文本 - 對屬性可能無法正常工作。 初始嘗試 state)</option> < o...
    程式設計 發佈於2025-04-29
  • 如何在JavaScript對像中動態設置鍵?
    如何在JavaScript對像中動態設置鍵?
    在嘗試為JavaScript對象創建動態鍵時,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正確的方法採用方括號: jsobj ['key''i] ='example'1; 在JavaScript中,數組是一...
    程式設計 發佈於2025-04-29
  • 如何簡化PHP中的JSON解析以獲取多維陣列?
    如何簡化PHP中的JSON解析以獲取多維陣列?
    php 試圖在PHP中解析JSON數據的JSON可能具有挑戰性,尤其是在處理多維數組時。 To simplify the process, it's recommended to parse the JSON as an array rather than an object.To do...
    程式設計 發佈於2025-04-29
  • Python不會對超範圍子串切片報錯的原因
    Python不會對超範圍子串切片報錯的原因
    在python中用索引切片範圍:二重性和空序列索引單個元素不同,該元素會引起錯誤,切片在序列的邊界之外沒有。 這種行為源於索引和切片之間的基本差異。索引一個序列,例如“示例” [3],返回一個項目。但是,切片序列(例如“示例” [3:4])返回項目的子序列。 索引不存在的元素時,例如“示例” [9...
    程式設計 發佈於2025-04-29
  • 找到最大計數時,如何解決mySQL中的“組函數\”錯誤的“無效使用”?
    找到最大計數時,如何解決mySQL中的“組函數\”錯誤的“無效使用”?
    如何在mySQL中使用mySql 檢索最大計數,您可能會遇到一個問題,您可能會在嘗試使用以下命令:理解錯誤正確找到由名稱列分組的值的最大計數,請使用以下修改後的查詢: 計數(*)為c 來自EMP1 按名稱組 c desc訂購 限制1 查詢說明 select語句提取名稱列和每個名稱...
    程式設計 發佈於2025-04-29
  • 為什麼HTML無法打印頁碼及解決方案
    為什麼HTML無法打印頁碼及解決方案
    無法在html頁面上打印頁碼? @page規則在@Media內部和外部都無濟於事。 HTML:Customization:@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: ...
    程式設計 發佈於2025-04-29
  • 如何在Java中正確顯示“ DD/MM/YYYY HH:MM:SS.SS”格式的當前日期和時間?
    如何在Java中正確顯示“ DD/MM/YYYY HH:MM:SS.SS”格式的當前日期和時間?
    如何在“ dd/mm/yyyy hh:mm:mm:ss.ss”格式“ gormat 解決方案: args)拋出異常{ 日曆cal = calendar.getInstance(); SimpleDateFormat SDF =新的SimpleDateFormat(“...
    程式設計 發佈於2025-04-29
  • 為什麼不使用CSS`content'屬性顯示圖像?
    為什麼不使用CSS`content'屬性顯示圖像?
    在Firefox extemers屬性為某些圖像很大,&& && && &&華倍華倍[華氏華倍華氏度]很少見,卻是某些瀏覽屬性很少,尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到:。 googlepic { 內容:url(&...
    程式設計 發佈於2025-04-29

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3