#OOCSS #Object Oriented CSS #SMACSS #Scalable and Modular Architecture for CSS #BEM #Block Element Modifier

 

 

🎈OOCSS (Object Oriented CSS)

📜객체 지향 원칙을 적용해 구조(Structure)와 외형(Skin), 컨테이너(Container)와 내용(Content)을 
   분리합니다.

📜공통 패턴(버튼, 그리드 등)을 재사용 가능한 모듈로 만들어 코드 중복을 줄이지만, 
   다중 클래스 사용으로 HTML이 복잡해질 수 있습니다.

📜HTML

<a class="btn primary">Facebook</a>  
<a class="btn success">Twitter</a>

📜CSS

.btn { padding: 10px 20px; border: none; border-radius: 4px; text-decoration: none; }  
.primary { background: blue; color: white; }  
.success { background: green; color: white; }

🎈SMACSS (Scalable and Modular Architecture for CSS)

📜CSS를 5개 카테고리로 분류: 
  - Base(기본)
  - Layout(레이아웃)
  - Module(모듈)
  - State(상태)
  - Theme(테마)

📜범주별 파일 분리와 예측 가능한 클래스명으로 확장성을 높이며,
   Spring 개발자처럼 모듈화된 아키텍처에 익숙한 분께 유연한 선택입니다.

📜HTML

<button class="m-button is-active">Submit</button>  
<button class="m-button">Cancel</button>

📜CSS

.m-button { padding: 10px; background: gray; color: white; border: none; }  
.is-active { background: blue; }

🎈BEM (Block Element Modifier)

📜클래스를 block__element--modifier 형식으로 명명
  (Block: 컴포넌트, Element: 하위 요소, Modifier: 변형)

📜명확한 계층 구조로 클래스 충돌을 방지하고 가독성이 높지만, 이름이 길어질 수 있습니다.

📜HTML

<form class="search-form">  
  <input class="search-form__input" />  
  <button class="search-form__button search-form__button--blue">Search</button>  
</form>

📜CSS

.search-form { display: flex; }  
.search-form__input { flex: 1; padding: 10px; }  
.search-form__button { padding: 10px; background: gray; }  
.search-form__button--blue { background: blue; color: white; }

🦖한줄정리 

OOCSS는 객체 지향적이지만 한개의 파일에서 관리하고 SMACSS는 해당내역을 5개의 레이어에 맞게 나눠 구성 BEM은 한개의 클래스에 컴포넌트, 하위요서 변형을 해서 구성

📁 OOCSS/
  └── style.css          ← 모든 CSS 한 파일

📁 SMACSS/                 ← 5개 레이어 분리
  ├── base.css
  ├── layout.css
  ├── module.css
  ├── state.css
  └── theme.css

📁 BEM/
  └── style.css          ← 한 파일이지만 클래스명 엄격