選択者優先度ルール

BEM

<style>
.bx {...}
.cnt {...}
.mt {...}
</style>

<style>
.content {...}
.button {...}
.top {...}
</style>

<style>
//reset.css 
a { text-decoration: none; } 

//local.css 
.module a { text-decoration: underline; } 
#special.module a { text-decoration: none; } 😱
#another#special.module a { text-decoration: underline; } 😱
</style>

Block / Element / Modifier

特長

命名規則

<style>
.block {...}
.block__element {...}
.block__element--modifier {...}
.block--modifier {...}
</style>

オプション

適用例

// 접두어를 추가해 camelCase로 작성한 예
<style>
.lzModal {...}
.lzModal__title {...}
.lzBtn {...}
.lzBtn--small {...}
</style>

BEM例

// 단순 블록 사용 가능
<button class="btn"> 

// ❌ 변형 클래스 단독 사용
<button class="btn--submit">

// ⭕ 블록 이름 명시 후 변형 클래스 사용
<button class="btn btn--submit"> 
<em class="info__label info__label--warning">

<style>
/* ❌ BEM 안티 패턴으로 작성하여 특이성이 높아진 잘못된 사용 예 */
.photo {} /* 특이성 10 */ 
.photo img{} /* 특이성 11 */ 
.photo figcaption{} /* 특이성 11 */
</style>

<style>
/* ⭕ 올바른 사용 예 */
.photo {} /* 특이성 10 */ 
.photo__img{} /* 특이성 10*/ 
.photo__caption {} /* 특이성 10 */ 
</style>

<style>
.__elem {} /* 블록 이름 생략 ❌ */
.--modi {} /* 요소 이름 생략 ❌ */
.block__elem1__elem2{} /* element 이름 두번 작성 ❌ */
.block--modi1-modi1{} /* modifier 이름 두번 작성 ❌ */
</style>

Summary

Atomic/Utility First CSS

長所

短所