깔끔한 스타일시트를 위한 CSS 서식 모범 사례

잘 정리된 CSS는 유지보수 가능한 모든 웹 프로젝트의 기초입니다. 지저분한 스타일시트는 디버깅을 느리게 하고, 팀원들을 좌절시키며, 미묘한 버그를 유발합니다. 이 가이드는 전문 개발자들이 CSS를 깔끔하고 일관되게 유지하기 위해 사용하는 규칙, 도구, 기법을 다룹니다.

CSS 서식이 중요한 이유

서식이 없는 CSS도 서식이 있는 CSS와 동일하게 작동합니다 — 브라우저는 공백에 신경 쓰지 않습니다. 하지만 개발자는 다릅니다. 잘못된 서식의 스타일시트는 다음 문제를 야기합니다:

머지 충돌 여러 개발자가 같은 파일을 편집할 때
중복 선언 텍스트 벽에서 발견하기 어려운
신규 팀원의 느린 온보딩
숨겨진 버그 일관되지 않은 들여쓰기와 중첩에 가려진

일관된 서식은 이러한 문제를 해결하고 코드 리뷰를 더 빠르고 생산적으로 만듭니다.

들여쓰기 규칙

두 가지 주요 규칙은 2 스페이스와 4 스페이스입니다. 탭은 CSS에서 덜 일반적이지만 일부 프로젝트에서 여전히 사용됩니다.

2 스페이스 들여쓰기 (가장 인기)

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a2e;
}

대부분의 CSS 스타일 가이드 — Google과 Airbnb 포함 — 는 2 스페이스를 권장합니다. 미디어 쿼리와 전처리기 중첩에서 과도한 가로 스크롤 없이 중첩된 선택자를 읽기 쉽게 유지합니다.

속성 정렬

무작위 속성 순서는 CSS에서 가장 흔한 서식 실수입니다. 두 가지 주요 전략이 있습니다:

1. 유형별 그룹화 (권장)

.element {
  /* 위치 지정 */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;

  /* 디스플레이 및 박스 모델 */
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;

  /* 타이포그래피 */
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;

  /* 시각적 요소 */
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;

  /* 애니메이션 */
  transition: transform 0.2s ease;
}

2. 알파벳 순서

일부 팀은 속성을 알파벳순으로 정렬합니다. 간단하고 예측 가능하지만 width와 height 같은 관련 속성을 분리합니다.

그룹화 접근법은 규칙 세트를 스캔할 때 더 나은 컨텍스트를 제공합니다.

CSS 포매터 도구로 CSS를 즉시 포맷하세요.

중첩 모범 사례

CSS 중첩(네이티브 또는 Sass 같은 전처리기)은 가독성을 향상시킬 수 있지만 과도하게 사용하면 문제를 일으킵니다.

좋은 예: 얕은 중첩 (최대 2–3 레벨)

.nav {
  display: flex;
  gap: 1rem;

  & .nav__link {
    color: #555;
    text-decoration: none;

    &:hover {
      color: #0066cc;
    }
  }
}

나쁜 예: 깊은 중첩

깊은 중첩은 길고 매우 구체적인 선택자를 생성하여 오버라이드가 어렵고 성능에 영향을 미칩니다. 좋은 규칙: 3 레벨 이상 중첩하고 있다면 구조를 리팩토링하세요.

자동 서식 도구

수동 서식은 확장되지 않습니다. 팀 전체에서 일관성을 보장하기 위해 자동화된 도구를 사용하세요.

Prettier

Prettier는 가장 인기 있는 코드 포매터로 CSS, SCSS, Less를 기본 지원합니다:

npm install --save-dev prettier
npx prettier --write "**/*.css"

Stylelint

Stylelint는 서식 이상의 오류를 감지하고 규칙을 적용합니다:

npm install --save-dev stylelint stylelint-config-standard
npx stylelint "**/*.css"

BEM 명명 규칙

BEM (블록 요소 수정자)은 가장 널리 사용되는 CSS 명명 규칙입니다:

/* 블록 */
.card { }

/* 요소 (블록의 일부) */
.card__header { }
.card__body { }

/* 수정자 (블록 또는 요소의 변형) */
.card--featured { }

CSS 커스텀 프로퍼티

커스텀 프로퍼티(CSS 변수)는 일관된 서식에서 큰 이점을 얻습니다:

:root {
  /* 색상 */
  --color-primary: #0066cc;
  --color-secondary: #6c757d;

  /* 타이포그래피 */
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;

  /* 간격 */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

카테고리별로 변수를 그룹화하고 일관된 명명 접두사를 사용하세요.

흔한 서식 실수

1. 누락된 세미콜론

항상 마지막 선언에 후행 세미콜론을 포함하세요. 새 속성을 추가할 때 버그를 방지합니다.

2. 일관되지 않은 간격

/* 나쁨 */
.header{
  color : red;
  margin:0;
}

/* 좋음 */
.header {
  color: red;
  margin: 0;
}

3. 한 줄 규칙

한 줄 규칙은 git diff를 복잡하게 만들고 속성을 놓치기 쉽게 합니다. 항상 다중 줄 형식을 사용하세요.

FAQ

CSS에서 탭을 써야 하나요, 스페이스를 써야 하나요?

스페이스가 CSS의 업계 표준입니다. 대부분의 스타일 가이드와 포매터(Prettier)는 기본적으로 2 스페이스를 사용합니다. 팀이 합의한 것을 사용하되, 일관성을 유지하세요.

팀에서 CSS 서식을 어떻게 강제하나요?

공유 구성 파일로 Prettier를 설정하고, Husky와 lint-staged를 사용한 pre-commit 훅을 추가하고, CI 파이프라인에서 서식이 맞지 않는 코드를 거부하도록 구성하세요.

깔끔한 스타일시트를 위한 CSS 서식 모범 사례

CSS 서식이 중요한 이유

머지 충돌 여러 개발자가 같은 파일을 편집할 때
중복 선언 텍스트 벽에서 발견하기 어려운
신규 팀원의 느린 온보딩
숨겨진 버그 일관되지 않은 들여쓰기와 중첩에 가려진

일관된 서식은 이러한 문제를 해결하고 코드 리뷰를 더 빠르고 생산적으로 만듭니다.

들여쓰기 규칙

두 가지 주요 규칙은 2 스페이스와 4 스페이스입니다. 탭은 CSS에서 덜 일반적이지만 일부 프로젝트에서 여전히 사용됩니다.

2 스페이스 들여쓰기 (가장 인기)

.card {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a2e;
}

속성 정렬

무작위 속성 순서는 CSS에서 가장 흔한 서식 실수입니다. 두 가지 주요 전략이 있습니다:

1. 유형별 그룹화 (권장)

.element {
  /* 위치 지정 */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;

  /* 디스플레이 및 박스 모델 */
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 2rem;

  /* 타이포그래피 */
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: #333;

  /* 시각적 요소 */
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;

  /* 애니메이션 */
  transition: transform 0.2s ease;
}

2. 알파벳 순서

일부 팀은 속성을 알파벳순으로 정렬합니다. 간단하고 예측 가능하지만 width와 height 같은 관련 속성을 분리합니다.

그룹화 접근법은 규칙 세트를 스캔할 때 더 나은 컨텍스트를 제공합니다.

CSS 포매터 도구로 CSS를 즉시 포맷하세요.

중첩 모범 사례

CSS 중첩(네이티브 또는 Sass 같은 전처리기)은 가독성을 향상시킬 수 있지만 과도하게 사용하면 문제를 일으킵니다.

좋은 예: 얕은 중첩 (최대 2–3 레벨)

.nav {
  display: flex;
  gap: 1rem;

  & .nav__link {
    color: #555;
    text-decoration: none;

    &:hover {
      color: #0066cc;
    }
  }
}

나쁜 예: 깊은 중첩

자동 서식 도구

수동 서식은 확장되지 않습니다. 팀 전체에서 일관성을 보장하기 위해 자동화된 도구를 사용하세요.

Prettier

Prettier는 가장 인기 있는 코드 포매터로 CSS, SCSS, Less를 기본 지원합니다:

npm install --save-dev prettier
npx prettier --write "**/*.css"

Stylelint

Stylelint는 서식 이상의 오류를 감지하고 규칙을 적용합니다:

npm install --save-dev stylelint stylelint-config-standard
npx stylelint "**/*.css"

BEM 명명 규칙

BEM (블록 요소 수정자)은 가장 널리 사용되는 CSS 명명 규칙입니다:

/* 블록 */
.card { }

/* 요소 (블록의 일부) */
.card__header { }
.card__body { }

/* 수정자 (블록 또는 요소의 변형) */
.card--featured { }

CSS 커스텀 프로퍼티

커스텀 프로퍼티(CSS 변수)는 일관된 서식에서 큰 이점을 얻습니다:

:root {
  /* 색상 */
  --color-primary: #0066cc;
  --color-secondary: #6c757d;

  /* 타이포그래피 */
  --font-family-base: 'Inter', system-ui, sans-serif;
  --font-size-base: 1rem;

  /* 간격 */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
}

카테고리별로 변수를 그룹화하고 일관된 명명 접두사를 사용하세요.

흔한 서식 실수

1. 누락된 세미콜론

항상 마지막 선언에 후행 세미콜론을 포함하세요. 새 속성을 추가할 때 버그를 방지합니다.

2. 일관되지 않은 간격

/* 나쁨 */
.header{
  color : red;
  margin:0;
}

/* 좋음 */
.header {
  color: red;
  margin: 0;
}

3. 한 줄 규칙

한 줄 규칙은 git diff를 복잡하게 만들고 속성을 놓치기 쉽게 합니다. 항상 다중 줄 형식을 사용하세요.

깔끔한 스타일시트를 위한 CSS 서식 모범 사례

CSS 서식이 중요한 이유

들여쓰기 규칙

2 스페이스 들여쓰기 (가장 인기)

속성 정렬

1. 유형별 그룹화 (권장)

2. 알파벳 순서

중첩 모범 사례

좋은 예: 얕은 중첩 (최대 2–3 레벨)

나쁜 예: 깊은 중첩

자동 서식 도구

Prettier

Stylelint

BEM 명명 규칙

CSS 커스텀 프로퍼티

흔한 서식 실수

1. 누락된 세미콜론

2. 일관되지 않은 간격

3. 한 줄 규칙

FAQ

CSS에서 탭을 써야 하나요, 스페이스를 써야 하나요?

팀에서 CSS 서식을 어떻게 강제하나요?

관련 리소스

깔끔한 스타일시트를 위한 CSS 서식 모범 사례

CSS 서식이 중요한 이유

들여쓰기 규칙

2 스페이스 들여쓰기 (가장 인기)

속성 정렬

1. 유형별 그룹화 (권장)

2. 알파벳 순서

중첩 모범 사례

좋은 예: 얕은 중첩 (최대 2–3 레벨)

나쁜 예: 깊은 중첩

자동 서식 도구

Prettier

Stylelint

BEM 명명 규칙

CSS 커스텀 프로퍼티

흔한 서식 실수

1. 누락된 세미콜론

2. 일관되지 않은 간격

3. 한 줄 규칙

FAQ

CSS에서 탭을 써야 하나요, 스페이스를 써야 하나요?

팀에서 CSS 서식을 어떻게 강제하나요?

관련 리소스