scss-best-practices은(는) 무엇을 하나요?
SCSS/Sassy CSS 모범 사례 및 유지보수 가능하고 확장 가능한 스타일시트를 위한 코딩 가이드라인
개요
이 프로젝트는 SCSS(Sassy CSS)를 사용하여 깔끔하고 유지보수 가능하며 확장 가능한 스타일시트를 작성하기 위한 모범 사례와 가이드라인을 제공합니다. 이 가이드라인은 신규 프로젝트에도 적용 가능하며 기존 스타일시트를 리팩터링하는 데도 도움이 됩니다.
주요 원칙
- 일관성(Consistency): 모든 스타일시트에서 동일한 패턴과 규칙을 사용합니다.
- 가독성(Readability): 다른 개발자(또는 미래의 자신)가 쉽게 이해할 수 있도록 작성합니다.
- 재사용성(Reusability): 변수, 믹스인, 플레이스홀더 선택자를 최대한 활용합니다.
- 모듈성(Modularity): 스타일을 논리적인 단위로 분할하고 부분 파일(partials)로 구성합니다.
네이밍 규칙
- 파일명: 소문자와 하이픈을 사용합니다 (예:
_button.scss). - 변수:
$접두사와 케밥-케이스(kebab-case)를 사용합니다 (예:$primary-color). - 믹스인:
@mixin지시어와 함께 케밥-케이스를 사용합니다 (예:@mixin flex-center). - 클래스: BEM(Block Element Modifier) 규칙을 권장합니다.
구조
styles/
├── abstracts/ # 변수, 함수, 믹스인
├── base/ # 리셋, 타이포그래피, 기본 스타일
├── components/ # 재사용 가능한 UI 구성 요소
├── layout/ # 전체 레이아웃 관련 스타일
├── pages/ # 페이지별 스타일
└── themes/ # 테마 관련 스타일
변수 사용
전역 변수를 과도하게 사용하지 말고, 가능한 한 지역적인 범위에서 선언하세요. 색상, 폰트 크기, 간격 등 일관된 값을 변수로 정의하여 유지보수를 용이하게 합니다.
// 좋은 예
$primary-color: #3498db;
$font-size-base: 16px;
$spacing-unit: 8px;
// 피해야 할 예
$color1: #333;
$font1: 14px;
믹스인과 함수
복잡한 CSS 패턴이나 브라우저별 속성은 믹스인으로 추상화하세요. 함수는 계산이 필요한 경우에만 사용합니다.
@mixin respond($breakpoint) {
@if $breakpoint == 'mobile' {
@media (max-width: 768px) { @content; }
}
}
성능
- 선택자 중첩을 3단계 이하로 유지하세요.
@extend는 플레이스홀더 선택자와 함께 사용할 때만 활용하세요.- 속성 축약형(shorthand)을 적극 사용하세요.
- 불필요한 리스트와 맵 생성은 피하세요.
문서 및 참고
이 가이드라인은 SCSS의 공식 문서와 커뮤니티에서 권장하는 모범 사례를 기반으로 합니다. 프로젝트별 요구사항에 따라 유연하게 적용하세요.