CSS 포매터

이 도구 소개

CSS를 포맷하고 정리합니다. 압축되거나 흐트러진 규칙이 한 줄에 선언 하나, 일관된 간격으로 바뀌어 리뷰와 diff가 읽기 쉬워집니다. 바뀌는 것은 공백뿐이며 선택자·값·캐스케이드는 그대로입니다.

사용 방법

한 줄로 뭉쳐 있거나 압축된 CSS를 붙여 넣고 포맷을 실행한 뒤 결과를 편집기로 옮기세요. 반대 방향이 필요하면 압축 도구를 사용하면 됩니다.

예제

기본 예시는 압축된 카드 코드로, 실행하면 들여쓰기가 복원됩니다.

입력

.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}

출력

.card {
  display: flex;
  padding: 1.5rem;
  border-radius: .5rem;
  background: #fff;
}

.card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

팁

코드 리뷰 전에는 포맷을 정리하고, 압축은 배포 빌드에서만 적용하는 편이 관리하기 쉽습니다.

알아 두면 좋은 점