CSS 형식화란?
CSS 형식화는 Cascading Style Sheets에 일관된 들여쓰기, 줄바꿈, 간격을 추가하여 사람이 읽기 쉽게 만드는 과정입니다. 브라우저는 CSS의 공백을 완전히 무시합니다. 한 줄로 압축된 코드와 깔끔하게 들여쓴 스타일시트는 동일하게 렌더링됩니다. 차이는 가독성입니다. 형식화된 CSS를 사용하면 선택자를 훑어보고, 누락된 세미콜론을 발견하고, 캐스케이드를 한눈에 파악할 수 있습니다.
CSS 포매터(CSS 뷰티파이어 또는 프리티 프린터라고도 함)는 압축되거나 일관성 없이 작성된 CSS를 받아 균일한 들여쓰기, 선언 당 한 줄, 일관된 중괄호 배치로 다시 작성합니다. 이는 미니피케이션의 역연산으로, 미화(beautification) 또는 프리티 프린팅(pretty-printing)이라고도 합니다. 미니피케이션이 프로덕션을 위해 파일 크기를 줄이려 공백을 제거한다면, 형식화는 개발, 코드 리뷰, 코드베이스 유지보수를 위해 구조를 복원합니다.
CSS 명세(W3C CSS Syntax Module Level 3)는 스타일시트의 문법을 정의하지만 공백 규칙에 대해서는 아무것도 규정하지 않습니다. 형식화 규칙은 팀의 결정 사항입니다. 탭 vs. 스페이스, 2칸 vs. 4칸 들여쓰기, 중괄호 스타일, 규칙 집합 사이의 빈 줄 등이 그 예입니다. 포매터는 선택한 규칙을 모든 파일에 걸쳐 일관되게 적용합니다. 대부분의 팀은 .prettierrc 또는 .editorconfig 파일에 선택 사항을 기록합니다.
이 CSS 포매터를 사용하는 이유
어떤 CSS든 붙여넣으면 수 밀리초 안에 올바르게 들여쓴 결과를 얻을 수 있습니다. 에디터 플러그인 설치, 설정 파일 작성, 계정 생성이 필요 없습니다.
CSS 포매터 활용 사례
CSS 속성 순서 참조
대부분의 CSS 포매터는 속성을 재정렬하지 않습니다. 그러나 많은 스타일 가이드는 관련 속성을 함께 그룹화하도록 권장합니다. 아래 표는 Stylelint의 order 플러그인과 CSScomb 같은 도구에서 사용되는 일반적인 그룹화 규칙입니다.
| 그룹 | 예시 속성 | 목적 |
|---|---|---|
| Position & Layout | position, display, float, clear | Defines the element's rendering mode |
| Box Model | width, height, margin, padding | Controls dimensions and spacing |
| Typography | font-size, line-height, color | Text styling properties |
| Visual | background, border, box-shadow | Decorative properties |
| Animation | transition, animation, transform | Motion and transform effects |
| Misc | cursor, overflow, z-index | Behavioral and stacking properties |
이 그룹화는 관례이지 CSS 요구 사항이 아닙니다. 브라우저는 규칙 블록 내 속성 위치와 관계없이 명시도와 소스 순서에 따라 선언을 적용합니다. 포매터는 공백과 들여쓰기에 집중하며, 속성 재정렬은 Stylelint 같은 도구가 처리하는 별도의 린팅 관심사입니다.
CSS 형식화 vs. CSS 미니피케이션
형식화와 미니피케이션은 반대되는 연산으로, 개발의 서로 다른 단계에서 적용됩니다.
코드 예제
다양한 언어와 환경에서 CSS를 프로그래밍 방식으로 형식화하는 방법입니다.
import * as prettier from 'prettier'
const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'
const formatted = await prettier.format(ugly, {
parser: 'css',
tabWidth: 2,
singleQuote: true,
})
// → "body {\n margin: 0;\n padding: 0;\n}\n\nh1 {\n font-size: 2rem;\n color: #333;\n}\n"import cssbeautifier
ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'
opts = cssbeautifier.default_options()
opts.indent_size = 2
formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n margin: 0;\n padding: 0;\n}\n\nh1 {\n font-size: 2rem;\n color: #333;\n}"# Format a single file in place
npx prettier --write styles.css
# Format all CSS files in a directory
npx prettier --write "src/**/*.css"
# Check formatting without modifying files
npx prettier --check "src/**/*.css"
# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';
use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;
$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';
$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
// margin: 0;
// padding: 0;
// }
// h1 {
// font-size: 2rem;
// color: #333;
// }