本文討論了使用 BEM 建立 CSS 的好處。 BEM 是一種 CSS 命名約定,有助於以模組化且可維護的方式建立 CSS 程式碼。 BEM 的好處包括增加模組化、提高可維護性、減少程式碼
使用 BEM 建立 CSS 有什麼好處?
BEM(區塊、元素、修飾符)是一種 CSS 命名約定,有助於在模組化且可維護的方式。它提供了幾個好處:
-
增加模組化: BEM 將 CSS 分成不同的區塊、元素和修飾符,使建立和重複使用元件變得更加容易。
-
提高可維護性: BEM 一致的命名結構使其更容易找到
-
減少程式碼重複:透過重複使用區塊和元素,BEM 最大限度地減少重複並提高程式碼效率。
-
增強的可擴展性:BEM 可以在不破壞現有程式碼的情況下無縫擴展現有樣式。
-
簡化重建: BEM 的模組化特性可以輕鬆重建和重組 CSS 程式碼。
如何使用 BEM 來提高 CSS 程式碼的模組化性和可維護性?
要有效地使用 BEM,請依照下列步驟操作:
-
辨識結構單元: 將 UI 元件分割為區塊、元素和修飾符。
-
建立類別: 為區塊、元素和修飾符定義單獨的 CSS 類別。使用兩個字母下劃線作為區塊名稱前綴(例如,
block__element
)。 block__element
).
-
Apply Modifiers: Use modifiers to alter block or element styles without breaking class specificity (e.g.,
block__element--modifier
- 應用修飾符: 使用修飾符來更改區塊或元素樣式而不破壞類別特異性(例如,
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中文網其他相關文章!