SCSS 문법을 사용할 때 주의할 점 - by. UXKM

Publishing
SCSS
SCSS 기본 문법
SCSS 문법을 사용할 때 주의할 점

요약 설명
SCSS는 강력한 기능을 제공하지만, 잘못 사용하면 오히려 문제가 될 수 있습니다.
과도한 중첩, 복잡한 선택자, 성능 저하, 유지보수 어려움 등은 주의해야 할 주요 사항입니다.

이 페이지에서는 SCSS 문법을 사용할 때 주의해야 할 사항들을 종합적으로 정리하고, 각 문제에 대한 해결 방법과 모범 사례를 상세히 알아봅니다.

중첩 깊이 제한

중첩은 유용하지만, 너무 깊게 중첩하면 문제가 발생할 수 있습니다.
선택자가 길어질수록 코드가 복잡해지고, 나중에 수정하거나 디버깅할 때 어디에서 스타일이 적용됐는지 찾기 어려워질 수 있습니다.

깊은 중첩의 문제점

너무 깊은 중첩은 다음과 같은 문제를 일으킬 수 있습니다:

가독성 저하: 코드가 복잡해져 이해하기 어려워짐
긴 선택자 생성: 컴파일된 CSS 선택자가 불필요하게 길어짐
성능 저하: 브라우저가 긴 선택자를 해석하는 데 시간이 걸림
유지보수 어려움: 수정 시 영향 범위를 파악하기 어려움

								.page {
								  .section {
								    .article {
								      .card {
								        .card__header {
								          .card__title {
								            font-size: 18px;
								          }
								        }
								      }
								    }
								  }
								}

위 코드는 컴파일되면 .page .section .article .card .card__header .card__title처럼 매우 긴 선택자가 됩니다.

								.page .section .article .card .card__header .card__title {
									font-size: 18px;
								}

권장 중첩 깊이

일반적으로 중첩은 3단계를 넘지 않는 것을 권장합니다.
컴포넌트 단위로 중첩을 제한하면 코드가 더 명확해집니다.

								.card {
								  padding: 16px;

								  .card__header {
								    margin-bottom: 8px;

								    .card__title {
								      font-size: 18px;
								    }
								  }

								  .card__body {
								    margin-top: 8px;
								  }
								}

이렇게 작성하면 컴포넌트 구조가 명확하고, 선택자도 적절한 길이를 유지합니다.

중첩 대신 BEM 사용

깊은 중첩 대신 BEM 방법론을 사용하면 클래스명 자체가 의미를 담고 있어 중첩 없이도 명확하게 스타일을 구분할 수 있습니다.

								// 중첩 없이도 명확함
								.card__title {
								  font-size: 18px;
								}

								.card__header {
								  margin-bottom: 8px;
								}

								.card__body {
								  margin-top: 8px;
								}

BEM을 사용하면 중첩 없이도 컴포넌트 구조를 명확하게 표현할 수 있습니다.

선택자 복잡도 관리

선택자가 너무 복잡하면 성능과 유지보수에 문제가 될 수 있습니다.
한 번 만들어 놓은 선택자는 프로젝트 전반에 영향을 주기 때문에, 처음부터 간단하고 명확한 형태로 설계하는 것이 중요합니다.

복잡한 선택자의 문제

복잡한 선택자는 다음과 같은 문제를 일으킬 수 있습니다:

성능 저하: 브라우저가 복잡한 선택자를 해석하는 데 시간이 걸림
특이성(Specificity) 증가: 나중에 스타일을 덮어쓰기 어려워짐
재사용 어려움: 특정 컨텍스트에 종속되어 다른 곳에서 사용하기 어려움

								/* 너무 복잡한 선택자 */
								.page .section .article .card .card__header .card__title .card__title-text {
								  font-size: 18px;
								}

간단한 선택자 사용

가능하면 간단하고 명확한 선택자를 사용하는 것이 좋습니다.

								/* 간단하고 명확한 선택자 */
								.card__title-text {
								  font-size: 18px;
								}

BEM 방법론을 사용하면 클래스명 자체가 충분히 구체적이어서 긴 선택자 체인이 필요 없습니다.

성능 고려사항

SCSS 코드가 최종 CSS 성능에 미치는 영향을 고려해야 합니다.
작성하는 순간에는 티 나지 않더라도, 누적된 스타일과 선택자는 파일 크기와 렌더링 속도에 직접적인 영향을 줍니다.

불필요한 중첩 피하기

모든 것을 중첩할 필요는 없습니다.
독립적인 스타일은 중첩 없이 작성하는 것이 더 효율적일 수 있습니다.

								// 불필요한 중첩
								.button {
								  .button--primary {
								    background: #0a58ca;
								  }
								}

								// 중첩 없이 작성
								.button--primary {
								  background: #0a58ca;
								}

파일 크기 최적화

불필요하게 긴 선택자나 중복 코드는 최종 CSS 파일 크기를 증가시킵니다. 파일 크기가 커지면 로딩 시간이 길어질 수 있습니다.
프로덕션 환경에서는 압축(compressed) 형식으로 컴파일하여 파일 크기를 최소화하는 것이 좋습니다.

유지보수성 고려사항

코드는 나중에 수정하기 쉬워야 합니다.
작성한 사람이 아니더라도 구조를 빠르게 이해하고, 안전하게 수정·추가할 수 있는 상태를 유지하는 것이 중요합니다.

일관된 네이밍 규칙

프로젝트 전체에서 일관된 네이밍 규칙을 사용하면 코드를 이해하고 수정하기 쉬워집니다.

BEM 방법론: Block__Element--Modifier 형태로 통일
변수명: 소문자와 하이픈 사용 ($primary-color)
믹스인명: 동사 형태로 명명 (@mixin flex-center)

모듈화 및 파일 분리

큰 파일보다는 기능별로 파일을 나누어 관리하는 것이 좋습니다.

								// _variables.scss
								$primary-color: #0a58ca;

								// _buttons.scss
								.button {
								  // ...
								}

								// _cards.scss
								.card {
								  // ...
								}

								// main.scss
								@use "variables";
								@use "buttons";
								@use "cards";

이렇게 파일을 분리하면 원하는 부분만 빠르게 찾아 수정할 수 있습니다.

의미 있는 주석 작성

복잡한 로직이나 특별한 이유가 있는 코드에는 의미 있는 주석을 작성하면 나중에 이해하기 쉬워집니다.

								.card {
								  // 모바일에서 터치 영역을 충분히 확보하기 위해
								  // 최소 높이를 44px로 설정
								  min-height: 44px;

								  // 다크 모드 지원을 위해 CSS 변수 사용
								  background: var(--card-bg, #fff);
								}

일반적인 실수와 해결 방법

SCSS를 사용할 때 자주 발생하는 실수와 그 해결 방법을 정리합니다.
처음에는 사소해 보이지만, 프로젝트 규모가 커질수록 이런 실수들이 디버깅 시간을 크게 늘리는 원인이 되기 쉽습니다.

& 기호 앞뒤 공백 실수

& 기호 앞뒤의 공백에 따라 컴파일 결과가 달라집니다.

								.button {
								  // & 앞에 공백: .button :hover (자식 선택자)
								  :hover {
								    background: #084298;
								  }

								  // & 뒤에 공백: .button --primary (잘못된 선택자)
								  & --primary {
								    background: #0a58ca;
								  }
								}

								.button {
								  // & 앞뒤 공백 없음
								  &:hover {
								    background: #084298;
								  }

								  &--primary {
								    background: #0a58ca;
								  }
								}

변수 스코프 오해

변수는 선언된 위치에 따라 사용 범위가 달라집니다.

								// 전역 변수
								$primary-color: #0a58ca;

								.button {
								  // 지역 변수 (이 블록 안에서만 사용 가능)
								  $local-color: #084298;
								  background: $local-color;
								}

								// $local-color는 여기서 사용 불가
								.card {
								  background: $primary-color; // 전역 변수는 사용 가능
								}

중첩된 선택자에서 부모 참조 오류

&는 직접 부모만 참조합니다.

								.page {
								  .section {
								    .card {
								      // &는 .card만 참조 (할아버지 .page는 참조 안 함)
								      &:hover {
								        // .card:hover (의도한 대로 동작)
								      }
											 
								      // .page .card가 되려면?
								      // .page & { } 형태로 작성해야 함
								}

파셜 파일 불러오기 실수

파셜 파일을 불러올 때 경로와 파일명을 정확히 지정해야 합니다.

								// _variables.scss 파일을 불러올 때
								@use "variables";      // ✅ _와 확장자 생략

								// 잘못된 예시
								@use "_variables";     // ❌ _ 포함하면 안 됨
								@use "variables.scss"; // ❌ 확장자 포함하면 안 됨

모범 사례 요약

SCSS를 효과적으로 사용하기 위한 모범 사례를 요약합니다.
앞에서 다룬 내용을 한 번에 정리해 두면, 새로운 파일을 작성할 때마다 체크리스트처럼 참고할 수 있습니다.
이 섹션의 내용을 팀 규칙이나 스타일 가이드에 반영해 두면, 프로젝트 전반의 코드 품질을 일정 수준 이상으로 유지하는 데 도움이 됩니다.

코드 작성 원칙: 중첩 깊이 제한: 3단계를 넘지 않기; 간단한 선택자: BEM 방법론 활용하여 긴 선택자 체인 피하기; 모듈화: 기능별로 파일 분리하여 관리; 일관성: 프로젝트 전체에서 일관된 네이밍과 구조 유지; 의미 있는 주석: 복잡한 로직이나 특별한 이유에 주석 추가

성능 최적화: 불필요한 중첩 피하기: 독립적인 스타일은 중첩 없이 작성; 파일 크기 최적화: 프로덕션에서는 압축 형식 사용; 선택자 복잡도 관리: 간단하고 명확한 선택자 사용

유지보수성 향상: 파일 구조화: abstracts, base, components, layout 등으로 체계적 분리; 변수 활용: 반복되는 값은 변수로 관리; 믹스인 활용: 반복되는 패턴은 믹스인으로 추출; 문서화: 복잡한 컴포넌트나 믹스인은 주석으로 문서화

정리

SCSS 문법을 사용할 때 주의해야 할 점에 대해 알아본 내용을 정리합니다.
지금까지 살펴본 내용은 모두 거창한 규칙이라기보다, 실제 프로젝트에서 문제를 줄이기 위해 많은 팀들이 공통으로 합의한 경험칙에 가깝습니다.
처음부터 모든 것을 완벽하게 지키는 것보다, 중요한 원칙들부터 하나씩 습관으로 만드는 것을 목표로 삼으면 좋습니다.

중첩 깊이 제한: 3단계를 넘지 않기, BEM 방법론 활용
선택자 복잡도 관리: 간단하고 명확한 선택자 사용
성능 고려: 불필요한 중첩 피하기, 파일 크기 최적화
유지보수성: 일관된 네이밍, 모듈화, 의미 있는 주석
일반적인 실수: & 공백, 변수 스코프, 파셜 불러오기 등 주의
모범 사례: 코드 작성 원칙, 성능 최적화, 유지보수성 향상 방법

다음 섹션에서는 변수(Variables)로 스타일을 관리하는 방법을 자세히 알아봅니다.