[Web] OOCSS, BEM에 관하여

OOCSS(Obeject Orient CSS)는 css 스타일링을 할 때 Object 단위로 아주 잘게 쪼갠 Utility Class를 많이 생성하는 것이다.

예시를 들자면 이렇다.

.f-s {
  font-size : 8px;
}
.f-m {
  font-size : 16px;
}
.f-l {
  font-size : 32px;
}

이렇게 미리 css 파일을 만들어 놓고, 필요할 때마다 class만 적으면 된다.

Bootstrap이 대표적인 OOCSS라고 볼 수 있다.

 

---

 

BEM(Block Element Modifier)은 클래스 이름을 쉽게 짓기 위한 방법론이다.

Block__Element__Modifier과 같은 형식으로 이름을 짓는다.

 

shopping_cart_buy 같은 형식으로 이름을 지으면 된다.