用更合理的方式寫 CSS

OOCSS 和 BEM

出於如下緣由，咱們鼓勵使用 OOCSS 和 BEM 的某種組合：

• 能夠幫助咱們理清 CSS 和 HTML 之間清晰且嚴謹的關係。

• 能夠幫助咱們建立出可重用、易裝配的組件。

• 能夠減小嵌套，下降特定性。

• 能夠幫助咱們建立出可擴展的樣式表。

OOCSS，也就是 「Object Oriented CSS（面向對象的CSS）」，是一種寫 CSS 的方法，其思想就是鼓勵你把樣式表看做「對象」的集合：建立可重用性、可重複性的代碼段讓你能夠在整個網站中屢次使用。

參考資料：

• Nicole Sullivan 的 OOCSS wiki

• Smashing Magazine 的 Introduction to OOCSS

BEM，也就是 「Block-Element-Modifier」，是一種用於 HTML 和 CSS 類名的_命名約定_。BEM 最初是由 Yandex 提出的，要知道他們擁有巨大的代碼庫和可伸縮性，BEM 就是爲此而生的，而且能夠做爲一套遵循 OOCSS 的參考指導規範。

• CSS Trick 的 BEM 101

• Harry Roberts 的 introduction to BEM

示例

<article class="listing-card listing-card--featured">

  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>

  <div class="listing-card__content">
    <p>Vestibulum id ligula porta felis euismod semper.</p>
  </div>

</article>

.listing-card { }
.listing-card--featured { }
.listing-card__title { }
.listing-card__content { }

• .listing-card 是一個塊（block），表示高層次的組件。

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

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