CSS 포매터

전과 후

입력 (압축):

.btn{background:#2563eb;color:#fff;padding:.5rem 1rem;border-radius:6px}.btn:hover{background:#1d4ed8}

출력 (정렬됨):

.btn {
  background: #2563eb;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
}

.btn:hover {
  background: #1d4ed8;
}

포매터가 하는 일

포매터가 지우는 것

/* 이 주석은 정렬하면 사라집니다 */
.button { background: #2563eb; }

블록 주석(/* ... */)은 출력에서 빠집니다. 필요하다면 정렬 전에 원본 파일의 사본을 보관하세요.

중첩 규칙 처리 (Sass / 최신 CSS 중첩)

포매터는 중첩된 규칙을 그 깊이에 맞춰 들여씁니다:

.card {
  padding: 1rem;

  & .title {
    font-weight: 600;
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

(& 없는) Sass/Less 문법도 허용됩니다. @mixin, @include, @extend 같은 Sass 전용 at-rule은 그대로 통과하지만 깊이 재정렬되지는 않습니다. 완전한 Sass 정렬은 Prettier 같은 Sass 인식 도구를 쓰세요.

정렬하지 말아야 할 때

• 프로덕션에서: 정렬이 아니라 압축하세요. 정렬된 CSS는 압축된 것보다 2-3배 큽니다.
• diff 전에: 양쪽을 모두 정렬하세요. 압축 파일을 보기 좋은 파일과 diff하면 읽을 수 없는 diff가 나옵니다.
• 빌드 파이프라인 안에서: Prettier나 프레임워크의 포매터가 일관성을 처리하게 하세요. 이 도구는 일회성 정리에 쓰세요.