bem 風格來寫 css 樣式

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

使用 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中文網其他相關文章！