오래된 CSS 포맷터 – CSSComb의 현대적 후계자

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

• 대상자: 프론트엔드 개발자, VS Code 사용자, CSS 유지보수 팀
• 난이도: 중급~고급 (CSS 툴 체인 이해 필요)

핵심 요약

• Old Fashioned CSS Formatter는 CSSComb의 공백을 메우는 VS Code 확장 프로그램으로, CSS 속성 정렬에 특화된 도구
• 3가지 정렬 전략 제공: Alphabetical, Concentric, Idiomatic (SMACSS, 프레임워크 가이드라인 기반)
• SCSS 지원, @media, @property 처리, VS Code 기존 포맷팅 설정과 호환

섹션별 세부 요약

1. 도구 소개 및 필요성

• CSSComb 중단으로 생긴 CSS 정렬 공백을 채우는 새로운 도구
• Stylelint (규칙 강제)와 Prettier (공백/인덴트만 처리)의 한계를 보완
• VS Code 확장 프로그램 형태로 제공 (현재 GitHub 및 VS Code Marketplace에서 배포)

2. 정렬 전략

• Alphabetical: 팀 내 일관성을 위한 간단한 알파벳 순 정렬
• Concentric: 외부 레이아웃 → 내부 타이포그래피 순으로 시각적 영향 기준 정렬
• Idiomatic: SMACSS, 프레임워크 가이드라인에 따른 산업 표준 정렬
• 개별 블록별 전략 선택 가능

3. 핵심 기능

• SCSS 깊은 지원 (PostCSS 활용)
• 관련 속성 그룹화 및 시각적 구분선 추가
• VS Code 기존 포맷팅 (예: Prettier)과의 순차적 연동 (포맷 → 정렬)
• @media, @property, 커스텀 신택스 원ative 처리

4. 다른 도구와의 비교

• Stylelint: 규칙 강제 가능 → 고급 정렬 불가
• Prettier: 공백/인덴트만 처리 → 속성 순서 논리 무시
• Old Fashioned: CSS 속성 순서 논리에 초점 → CSSComb의 역할 재정의

5. 활용 사례 및 설치

• 대규모 UI 시스템, SCSS 코드베이스 유지보수, CSS 기초 교육에 유용
• GitHub 및 VS Code Marketplace에서 직접 설치 가능
• 2025년 스타일의 포맷팅 지원 (VS Code 기존 설정 활용)

결론

• CSS 속성 정렬에 특화된 VS Code 확장 프로그램으로, CSSComb의 공백을 메우는 현대적 솔루션
• Alphabetical, Concentric, Idiomatic 전략 선택 및 SCSS/커스텀 신택스 지원으로 팀 협업 효율성 향상
• GitHub 및 VS Code Marketplace에서 즉시 사용 가능 (https://github.com/old-fashioned-css-formatter)