用更合理的方式寫出 CSS

OOCSS 和 BEM

出於以下原因，我們鼓勵使用 OOCSS 和 BEM 的某種組合：

• 可以幫助我們理清 CSS 和 HTML 之間清晰且嚴謹的關係。

• 可以幫助我們創建出可重複使用、易組裝的元件。

• 可以減少嵌套，降低特定性。

• 可以幫助我們建立出可擴展的樣式表。

OOCSS，也就是“Object Oriented CSS（面向對象的CSS）”，是一種寫CSS 的方法，其思想就是鼓勵你把樣式表看作“對象”的集合：創建可重用性、可重複性的程式碼片段讓你可以在整個網站中多次使用。

參考資料：

• Nicole Sullivan 的OOCSS wiki

• Smashing Magazine 的Introduction to OOCSS

類別名稱的_命名約定_。 BEM 最初是由 Yandex 提出的，要知道他們擁有巨大的程式碼庫和可擴展性，BEM 就是為此而生的，並且可以作為一套遵循 OOCSS 的參考指導規範。

• CSS Trick 的 BEM 101

• Harry Roberts 的 introduction to BEM

r. ，表示高層次的組件。

• .listing-card__title

  是一個元素（element），它屬於 .listing-card 的一部分，因此塊是由元素組成的。

• .listing-card--featured 是一個修飾符（modifier），表示這個區塊與 .listing-card 有著不同的狀態或變化。

• OOCSS 和 BEM

出於以下原因，我們鼓勵使用 OOCSS 和 BEM 的某種組合：

可以幫助我們理清嚴密的關係。

可以幫助我們創建出可重複使用、易組裝的元件。

• 可以減少嵌套，降低特定性。

• 可以幫助我們建立出可擴展的樣式表。

• OOCSS
，也就是“Object Oriented CSS（面向對象的CSS）”，是一種寫CSS 的方法，其思想就是鼓勵你把樣式表看作“對象”的集合：創建可重用性、可重複性的程式碼片段讓你可以在整個網站中多次使用。

• 參考資料：

Nicole Sullivan 的OOCSS wiki

Smashing Magazine 的Introduction to OOCSS

• 🜎類別名稱的_命名約定_。 BEM 最初是由 Yandex 提出的，要知道他們擁有巨大的程式碼庫和可擴展性，BEM 就是為此而生的，並且可以作為一套遵循 OOCSS 的參考指導規範。

• CSS Trick 的 BEM 101

Harry Roberts 的 introduction to BEM

• r. ，表示高層次的組件。

• .listing-card__title

  是一個元素（element），它屬於
.listing-card

的一部分，因此塊是由元素組成的。

.listing-card--featured
• 是一個修飾符（modifier），表示這個區塊與

  .listing-card 有著不同的狀態或變化。

• 更多用更合理的方式寫 CSS 相關文章請關注PHP中文網！