CSS 방법론[SMACSS, BEM, OOCSS]

🥠 공통 지향점

1. 코드의 재사용성 높이기
2. 쉽게 유지보수 할 수 있도록 하기
3. 확장 가능하게 하기
4. 클래스명으로 무슨 의미인지 예측 가능하도록 하기

---

🥠 SMACSS(Scalable & Modular Architecture for CSS)

• Class명을 통한 예측
• 재사용
• 쉬운 유지보수
• 확장

1. Base

   • 기본 스타일(Reset, Default .. )
   • 기본 스타일에는 !important 사용할 필요가 없다.

2. Layout

   • 레이아웃과 관련된 스타일 정의
   • class명에 'l-' suffix(접미사)를 붙인다.

3. Module

   • 모듈과 관련된 스타일 정의
   • 스타일 재사용을 위한 요소다
   • Block, Element, Module
   • 재사용을 위해 ID와 element 사용 금지(element를 사용해야 한다면 자식 선택자를 사용한다)

4. State

   • 상태를 나타내는 스타일 정의
   • hidden, expend, active, hover 등
   • class명에 's-' suffix를 붙인다.

5. Theme

   • 사이트의 전반적인 look과 feel 제어
   • 색이나 이미지를 불변하는 스타일과 분리 → 기존의 스타일을 재선언 할 수 있다.
   • 적용 점위가 넓으면 'theme-' suffix를 붙인다.

6. 유의사항

   • 파생된 선택자 사용 금지
   • ID 사용 금지
   • !important 사용 금지
   • class명은 의미있게
   • class명은 다른이가 이해할 수 있도록 선언

---

🥠 BEM(Block Element Modifier)

• Block, Element, Module 약자
• ID는 사용할 수 없다.
• 오직 Class명만 사용한다.
• ex) .header_navigation-secondary

1. Block

   • 문단 전체에 적용된 element 또는 element를 담고 있는 컨테이너
   • head block > menu block, logo block, search block, auth block...

2. Element

   • block 안에서 특정 기능을 수행하는 컴포넌트
   • element는 상황에 따라 달라진다.
   • 각 element는 두 개의 밑줄표시로 연결하여 block다음에 작성한다.
   • ex) .headerlogo, .headersearch, .headermenu, .headerlogin 등
   • block과 element명이 길면 '-'으로 연결한다.
   • ex) .block-name__element-name

3. Modifiers(수식어, 접미사)

   • block, element의 속성이다.
   • 이 속성은 block, element의 외관과 상태를 변화시킨다.
   • class명은 '-' 추가하여 modifier 추가
   • class명은 구체적이고 명료해야 한다.
   • class명은 HTML 안에서도 읽기 쉬워야 한다.
   • class명은 무엇을 나타내는지 분명해야 한다.

---

🥠 OOCSS(Object Oriented CSS)

• Object Oriented Css 약자
• css를 모듈화하여 중복을 최소화 한다
• 구조와 외양을 분리한다.
• 결합하면 다양한 결과물을 얻을 수 있다.
• 외양 : .button, .box, .widget, .skin...
• 컨테이너와 컨텐츠 분리
• ex) .globalwidth + .header-inside / .main / .footer-inside
• ex) .btnbase + .twitter / .facebook
• 단점) 다중 클래스 사용으로 HTML코드가 복잡해 진다.
• 단점 ) non-semantic한 클래스 사용

---

참조
https://github.com/hohoya33/css-methodologies