css 클래스명 짓기

BEM(Block-Element-Modifier) 방식

• 레이아웃을 고유한 block으로 나눈 뒤
• block내에서 고유한 element명을 붙여 block-element 방식으로 명명하고
• 엘리먼트 내의 세부 갈래가 있을 경우 block__element--modifier 방식으로 추가한다.

  예:
  .search__submit
.search__submit--inverse

Atomic CSS 방식

• 요소의 기능이 아닌 css 기능을 반영한 class명 짓기
• class 이름이 길어질 수 있지만 css 재사용성이 극대화된다는 장점이 있음

  예:

  .w10 h40 {
    width: 100%;
    height: 40%;
  }

---

참고:
https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/