[CSS] CSS 방법론

 

CSS 방법론

CSS 방법론은 CSS를 효율적이고 유지보수하기 쉽게 작성하기 위한 일련의 규칙과 가이드라인이다. 대규모 프로젝트에서 CSS를 체계적으로 관리하기 위해 필수적이다. 필요에 따라 여러 방법론을 혼합해 사용한다.

 

CSS 방법론 종류

BEM (Block Element Modifier)

가장 널리 사용되는 CSS 방법론으로, 클래스 이름을 통해 요소의 구조를 명확히 표현한다.

/* Block */
.card { }

/* Element */
.card__title { }
.card__image { }

/* Modifier */
.card--featured { }
.card__title--large { }

/* 실제 사용 예시 */
.header { }
.header__navigation { }
.header__logo { }
.header__logo--small { }

 

 

OOCSS (Object-Oriented CSS)

구조와 스킨을 분리하여 재사용성을 높이는 방법론이다.

/* 구조 */
.button {
  display: inline-block;
  padding: 1em 2em;
  border-radius: 4px;
}

/* 스킨 */
.button-primary {
  background: blue;
  color: white;
}

.button-secondary {
  background: gray;
  color: black;
}

 

 

SMACSS (Scalable and Modular Architecture for CSS)

CSS를 다섯 가지 카테고리로 분류하여 관리한다.

/* Base */
body, p, a { /* 기본 스타일 */ }

/* Layout */
.l-header, .l-grid { /* 레이아웃 관련 */ }

/* Module */
.card, .button { /* 재사용 가능한 모듈 */ }

/* State */
.is-active, .is-hidden { /* 상태 관련 */ }

/* Theme */
.theme-dark, .theme-light { /* 테마 관련 */ }

 

Atomic CSS

작은 단위의 스타일을 조합하여 사용하는 방식이다.

.m-0 { margin: 0; }
.p-1 { padding: 1rem; }
.text-center { text-align: center; }
.flex { display: flex; }

 

 

방법론 선택 기준

프로젝트 규모

소규모: 간단한 OOCSS나 BEM

대규모: SMACSS나 BEM + Atomic CSS 조합

팀 구성

소규모 팀: BEM이나 OOCSS

대규모 팀: 엄격한 SMACSS나 Atomic CSS

유지보수 요구사항

높은 재사용성: OOCSS나 Atomic CSS

명확한 구조화: BEM이나 SMACSS

 

예시

<!-- BEM 예시 -->
<article class="card">
  <header class="card__header">
    <h2 class="card__title">제목</h2>
  </header>
  <div class="card__content">
    <p class="card__text">내용</p>
  </div>
</article>

<!-- Atomic CSS 예시 -->
<div class="flex p-4 m-2 bg-white shadow-md">
  <h2 class="text-xl font-bold mb-2">제목</h2>
  <p class="text-gray-600">내용</p>
</div>

 

 

성능과 유지보수

선택자 최적화

/* 나쁜 예 */
.header .nav .list .item { }

/* 좋은 예 */
.header__nav-item { }

재사용성 고려

/* 재사용 가능한 컴포넌트 */
.button-base {
  /* 공통 스타일 */
}

.button--primary {
  @extend .button-base;
  /* 특정 스타일 */
}