不論是哪種程式，都會遇到命名這件事～
關於CSS的命名有什麼規則可以依循呢？
也許你可以試著瞭解看看BEM

什麼是BEM?

BEM = Block(區塊) Element(元素) Modifier (修飾符)

• 一種component-based 的CSS命名方法
• 將UI畫面切割成多個獨立的區塊，以Block(區塊) Element(元素) Modifier (修飾符)的方式做命名
• 目的是為了減少重覆的CSS code，並提升css reuse的可能性
• 由Yandex團隊提出

BEM的優點

• 可以從命名快速看出看出區塊與區塊之間的依賴關係
• 提升css reuse的可能性
• 定義一個團隊共用的命名規則

怎麼使用BEM?

Block (區塊)

1. 一個可以被reuse的區塊，eg. list
2. 可以被通俗定義的UI版面或元素
   • eg.header, footer, menu, card .. etc
   • 通常會是一個複合式的版面
   • 裡面可能會包有很多其他元素eg. button, text等等

Element (元素）

1. 在block中，不能被其他block reuse的區塊
2. 該版面中細部的的組成，通常會是文字區塊、圖片區塊或是連結區塊
3. 使用 "__" 作為前綴

Modifier (修飾符)

1. 定義 block 和 element的狀態顯示
2. 使用 "--" 作為前綴

撰寫方式

/** 規則公式 */
.block__element--modifiery{
    
}
/** 實際例子 - 使用css */
.list {   // 描述區塊
 ... 
}
.list__link { // 描述element
 ...
}
.list__link--disable { //描述element狀態
 ... 
}

/** 實際例子 - 使用scss 可簡化，並更容易看出層級關係*/
.list {   // 描述區塊
 ... 
   &__link { // 描述element
     ...
     &--disable { //描述element狀態
        ... 
     }
   } 
}

使用上自己的一些心得

我自己在一開始使用的時候其實很不習慣，因為CSS命名都會變得很長，
但如果命名完後從html其實可以很快速的掌握區塊之間的CSS是否有強烈的依存關係這點我覺得還蠻不錯的。

參考資料

BEM
Sass教學 (33) - BEM 設計模式

https://en.bem.info/methodology/key-concepts/