首頁  >  文章  >  web前端  >  bem 風格來寫 css 樣式

bem 風格來寫 css 樣式

DDD
DDD原創
2024-08-15 16:03:191043瀏覽

本文討論了使用 BEM 建立 CSS 的好處。 BEM 是一種 CSS 命名約定,有助於以模組化且可維護的方式建立 CSS 程式碼。 BEM 的好處包括增加模組化、提高可維護性、減少程式碼

bem 風格來寫 css 樣式

使用 BEM 建立 CSS 有什麼好處?

BEM(區塊、元素、修飾符)是一種 CSS 命名約定,有助於在模組化且可維護的方式。它提供了幾個好處:

  • 增加模組化: BEM 將 CSS 分成不同的區塊、元素和修飾符,使建立和重複使用元件變得更加容易。
  • 提高可維護性: BEM 一致的命名結構使其更容易找到
  • 減少程式碼重複:透過重複使用區塊和元素,BEM 最大限度地減少重複並提高程式碼效率。
  • 增強的可擴展性:BEM 可以在不破壞現有程式碼的情況下無縫擴展現有樣式。
  • 簡化重建: BEM 的模組化特性可以輕鬆重建和重組 CSS 程式碼。

如何使用 BEM 來提高 CSS 程式碼的模組化性和可維護性?

要有效地使用 BEM,請依照下列步驟操作:

  1. 辨識結構單元: 將 UI 元件分割為區塊、元素和修飾符。
  2. 建立類別: 為區塊、元素和修飾符定義單獨的 CSS 類別。使用兩個字母下劃線作為區塊名稱前綴(例如,block__element)。 block__element).
  3. Apply Modifiers: Use modifiers to alter block or element styles without breaking class specificity (e.g., block__element--modifier
  4. 應用修飾符: 使用修飾符來更改區塊或元素樣式而不破壞類別特異性(例如,block__element--
單獨的關注點:

保持區塊和元素樣式分開,以保持靈活性並減少重複。 //getbem.com/concepts/)

[BEM 範例](https://github.com/bem/bem)

    [CSS 觸發器: BEM 入門](https://css-tricks.com/bem -primer/)
  • [Pluralsight BEM 課程](https://www.pluralsight.com/courses/css-bem-practical-guide)
  • [Codecademy 上的BEM 教學](https://www.codecademy. com/learn/css-bem)

以上是bem 風格來寫 css 樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn