CSS 방법론

OOCSS(Object Oriented CSS)

: 2008년 니콜 설리번이 제안한 방법론

 

• 구조와 외형의 분리

.btn {
  width: 80px;
  padding: 10px 18px 10px 10px;
}
.delete {
  background-color: red;
  color: white;
}
.add {
  background-color: blue;
  color: white;
}

<button class="btn delete">Delete</button>
<button class="btn add">Add</button>

btn <-> delete 또는 btn <-> add ⇒ 구조의 분리

delete <-> add ⇒ 외형의 분리

 

• 컨테이너와 콘텐츠의 분리

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Title</h3>
  </div>
  <div class="card-body">
    <p>Contents</p>
  </div>
</div>

.card {...}
.card-header {...}
.card-title {...}
.card-body {...}

 

SMACSS(Scalable and Modular Architecture for CSS)

: 2011년에 조너선 스누크가 제안한 방법론

• 기본 규칙

reset.css

body {...}
ol, ul {...}

- 태그 선택자나 의사 클래스 선택자(가상 요소 선택자, 가상 클래스 선택자)만 사용해야 한다.

- !important와 같이 우선순위에 영향을 줄 수 있는 직접적인 키워드도 사용해선 안 된다.

 

• 레이아웃 규칙

#header {
  width: 300px;
}
.l-wide #header {
  width: 800px;
}
.l-responsive #header {
  width: 100%;
}

클래스명은 항상 ‘l-’로 시작한다.

 

• 모듈 규칙

.card {...}
.card-title {...}
.card-desc {...}

<div class="card">
  <h2 class="card-title">Title</h2>
  <p class="card-desc">Description</p>
</div>

 

• 상태 규칙

.is-important {...}

- 접두사 ‘is-’를 사용하며, 필요시 !important 키워드를 사용할 수 있다.

 

• 테마 규칙

theme/default.css

.default-text-color {
  color: black;
}

 

theme/darkmode.css

.default-text-color {
  color: white;
}

 

 

BEM

: 2009년 러시아의 Yandex라는 회사가 제안한 방법론

- 스타일을 정의하기 위한 클래스 속성의 명명 규칙에 초점을 두고 있다.

// 예시 코드
<div>
  <h1>Title</h1>
  <p>Contents</p>
  <button>Save</button>
  <button>Delete</button>
</div>

 

• Block

- 하나의 그룹에서 가장 상위에 있는 요소. 따라서 자체가 독립적이어야 한다.

- 예시 코드에서 최상위 div에 해당

<div class="card"> // 속성명 적용
  <h1>Title</h1>
  <p>Contents</p>
  <button>Save</button>
  <button>Delete</button>
</div>

 

• Element

- 실질적인 콘텐츠 역할을 하는 요소

- 명명 규칙 : {Block 클래스명}__{Element명}

<div class="card">
  <h1 class="card__title">Title</h1>
  <p class="card__desc">Contents</p>
  <button class="card_btn">Save</button>
  <button class="card_btn">Delete</button>
</div>

 

• Modifier

- 특정 수식어로 분류할 때 사용

- 명명 규칙 : {대상 속성명}—{Modifier명}

<div class="card">
  <h1 class="card__title">Title</h1>
  <p class="card__desc">Contents</p>
  <button class="card_btn--save">Save</button> // 속성명 적용
  <button class="card_btn--delete">Delete</button> // 속성명 적용
</div>