如何用 BEM 來規範您的 CSS 的程式碼(例項篇）

摘要： 通常我們會把介面進行分析，根據需要將介面中有一定意義且重複出現的單元規劃為元件，下面就是一個兩個具有不同風格但結構相同的卡片，卡片有圖片、標題和說明。 首先我們定義 card 如圖，card 是我們元件的名稱，需要具有一定意義且唯一。可以作為名稱空間與其他元件進行區分。...

通常我們會把介面進行分析，根據需要將介面中有一定意義且重複出現的單元規劃為元件，下面就是一個兩個具有不同風格但結構相同的卡片，卡片有圖片、標題和說明。

首先我們定義 card 如圖，card 是我們元件的名稱，需要具有一定意義且唯一。可以作為名稱空間與其他元件進行區分。

card--light card 後面緊跟兩個中劃線後表示修飾，所謂修飾就是樣式，也就是表面 card 的是什麼風格的。我們這裡有兩種樣式分別為白色背景和深灰背景的 card。

card--light 的 css 程式碼展示

card--dark 的 css 程式碼展示，修飾應該不會涉及到 card 的結構，多半是與具體顏色，內外邊距以及文字樣式有關的程式碼。這裡指明是與顏色相關，我們就需要其他像 padding box-shodow margin 這樣兩個風格共享的樣式提取到結構 card 定義中。

在 card--light 和 card--dark 僅保留兩種風格不同的樣式。

元件是由元素組成的，每一個元素名稱定義為元件名稱__元素名稱，也就是元件名加兩個下劃線連線元素名，在元件內元素名稱需要是唯一的。這一點應該很好理解