DAY26 - CSS命名规则 - BEM

不论是哪种程序，都会遇到命名这件事～
关於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/