BEM
在網頁前端開發時，有時候我們會遇到一些 class 命名的問題，舉幾個例子：
- 比如頁面上有兩個頭像 avator，一個在 navbar 上，另外一個在文章標題旁邊，功能都是秀出頭像，只是樣式上的不同，class 就沒辦法都取為 avator。
- 撰寫 style 時，有時候需要來回對照現在寫的 class 是在哪一個父元素下面，沒辦法看到 class 就知道他在網頁的哪個部分。
- 使用 Sass 時，有一個很棒的地方，就是它的巢狀結構，有沒有辦法讓他更簡潔，又一目瞭然。
有沒有一個 class 命名標準，可以一次解決上述的問題，有，那就是 BEM 了。
BEM 用元件化的觀念將整個頁面切分成不同區塊，更使得代碼擁有很好的重用性，主要分成 3 個等級：
- Block 區塊
- Element 元素
- Modifier 修飾
上面這個例子，可以很清楚的看到 class 開頭 recipe 就是他的 Block 元件本身，
雙底線 _ _ 後面接這個 block 裡的元素，圖片框，詳細內容……，
兩個連號 - - 後面接的是修飾，就是功能差不多，只有一點樣式不一樣，需要使用到不同的 class 時，我們會在 - - 後面加上他的描述，例如綠色按鈕 btn - - green。
BEM 命名規則 在 Sass 裡面，變得一目瞭然：
7-1 pattern
為了 Sass 的開發與維護更容易，把 style 資料夾分成7種:
- base/
- components/
- layout/
- pages/
- themes/
- abstracts/
- vendors/
7-1 pattern 很好的把 不同種類的 style 區分出來，避免了開發時單個 style 檔案過多行，找一個 selector 找老半天的窘境，也把一些共用的變數與接口放在專屬的 sass 檔，更輕鬆的管理整個專案的樣式。
Comments