BEM, SMACSS, OOCSS

프로젝트가 커질수록 CSS 도 그만큼 커지고, 복잡도는 높아진다. 불필요한 작업 및 중복을 최소화 하고 효율적임과 동시에 동료(다른사람) 이 쉽게 파악 할 수 있는, 즉 유지보수성이 좋은 CSS 를 만들기 위해선 몇가지 규칙이 필요하다. BEM SAMCSS OOCSS 는 그러한 방법들 중 하나이다.

OOCSS(Object Oriented CSS)

중복을 최소화하고 캡슐화를 원칙으로 하는 방법론이다.

• 컨테이너와 컨텐츠를 분리한다
  

• 구조와 모양을 분리 또는 결합한다
  

공통된 부분을 찾아 어디서나 재활용 할 수 있다는 장점이 있다. 반면에 다중 클래스 사용으로 유지보수의 어려움과 가독성이 떨어질 수 있다. (소규모 프로젝트에서는 강점이 두드러질 것으로 보인다.)

SMACSS(Scallable Modular Architecture CSS)

범주화로 패턴화를 하고자 하는 방법론이다. 5가지 범주가 존재한다.

1. Base : 스타일 초기화(reset.css)
   
2. layout : 주요요소(id), 하위요소(class)로 구분하고 접두사 사용
   
3. module : 재사용 가능한 구성요소
   
4. state : 요소의 상태 변화를 표현하고 접두사 사용
   
5. theme : 사용자가 선택 가능하도록 스타일을 재선언하여 사용
   

BEM(Block Element Modifier)

블록 + 요소 + 상태 (Block + Element + Modifier) 로 구분하여 클래스를 작성하며 엄격한 네이밍 규칙을 ㄸ른다.

1. Block : 재사용 가능한 영역, 하나의 단어를 사용하고 길어지면 -를 활용
   
2. Element : 블록의 내부 구성을 표현, 두개의 _ 를 활용함
   
3. modifer : 요소의 상태를 표현, 두개의 -를 활용
   
   코드를 직관적으로 이해할 수 있다는 장점이 있지만 이름이 길어질 수 있다.

위에서 살펴본 내용들은 CSS코드를 무질서 하게 작성 할 때 오는 문제점들을 보완 하고자 일관되고 체계적인 방법을 제시하는 방법론일 뿐이다. 특정 방법론을 선택하고 강제하여 사용하는 것은 명확한 장점과 함께 단점도 가져 가는 것이다. 방법론들의 의미를 잘 이해하고 적절하게 응용하여 CSS 체계를 만들어 사용하는 것이 좋을것 같다.