@extend 사용 시 주의사항 - by. UXKM

Publishing
SCSS
상속과 확장 (@extend)
@extend 사용 시 주의사항

요약 설명
@extend는 강력한 기능이지만, 잘못 사용하면 예상치 못한 CSS 출력과 유지보수 문제를 일으킬 수 있습니다.
특히 의도하지 않은 선택자 그룹화나 복잡한 선택자 생성은 대규모 프로젝트에서 디버깅을 어렵게 만들 수 있는 중요한 리스크입니다.

이 페이지에서는 @extend 사용 시 주의해야 할 사항들을 실제 예제와 함께 살펴보고, 플레이스홀더 선택자, 믹스인, 유틸리티 클래스 등으로 문제를 예방하거나 해결하는 전략을 정리합니다.

의도하지 않은 그룹화

@extend의 가장 큰 문제 중 하나는 의도하지 않은 선택자 그룹화입니다.
하나의 선택자를 extend하면, 그 선택자가 포함된 모든 선택자 조합에 스타일이 퍼져 나갈 수 있어, 예상치 못한 곳에 스타일이 적용될 수 있습니다.

문제 상황 예시

다음 예시는 @extend 사용으로 인해 원하지 않는 곳까지 스타일이 퍼지는 문제를 보여줍니다.

								.button {
								  padding: 8px 16px;
								  border-radius: 4px;
								}

								// 여러 곳에서 @extend 사용
								.sidebar .button-secondary {
								  @extend .button;
								}

								.header .button-primary {
								  @extend .button;
								}

								.button,
								.sidebar .button-secondary,
								.header .button-primary {
								  padding: 8px 16px;
								  border-radius: 4px;
								}

이제 .button을 어디에서 사용하든 .sidebar .button-secondary와 .header .button-primary가 항상 함께 묶여 스타일을 공유하게 됩니다.
나중에 .button을 다른 곳에 추가하면, 예상치 못한 요소까지 스타일이 함께 적용될 수 있습니다.

해결 방법 1: 플레이스홀더 선택자 사용

이 문제를 해결하려면 플레이스홀더 선택자를 사용하는 것이 좋습니다.
플레이스홀더 선택자는 %로 시작하는 컴파일되지 않는 가상 선택자로, @extend의 대상이 되기 전까지는 실제 CSS에 출력되지 않습니다.

즉, 플레이스홀더 선택자는 "상속 전용 베이스 스타일"을 정의하는 용도로 사용되며,
일반 클래스와 달리 직접 HTML에서 사용되지 않기 때문에 의도하지 않은 그룹화나 스타일 누출을 방지할 수 있습니다.

								// 플레이스홀더 선택자 (컴파일되지 않음)
								%button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								}

								// 원하는 선택자만 extend
								.sidebar .button {
								  @extend %button-base;
								}

								.header .button-primary {
								  @extend %button-base;
								}

								.sidebar .button,
								.header .button-primary {
								  padding: 8px 16px;
								  border-radius: 4px;
								}

플레이스홀더 선택자를 사용하면 .button 같은 "실제 클래스"를 extend하지 않고도, 원하는 선택자만 명시적으로 그룹화할 수 있습니다.

해결 방법 2: 믹스인으로 대체

또 다른 방법은 믹스인으로 공통 스타일을 캡슐화하고, 필요한 곳에서 @include로 호출하는 것입니다.

								@mixin button-base {
								  padding: 8px 16px;
								  border-radius: 4px;
								}

								.sidebar .button-secondary {
								  @include button-base;
								}

								.header .button-primary {
								  @include button-base;
								}

믹스인은 선택자를 그룹화하지 않고 스타일만 복사하므로, 어디에 어떤 스타일이 적용되는지 CSS 출력 결과를 더 직관적으로 파악할 수 있습니다.

복잡한 선택자와 유지보수 문제

@extend를 과도하게 사용하면 복잡한 선택자와 유지보수 문제가 발생할 수 있습니다.
특히 중첩된 선택자나 BEM 스타일 네이밍을 사용할 때는 @extend가 예상치 못한 결과를 만들 수 있어 주의가 필요합니다.

복잡한 선택자 예시

다음 예시는 중첩된 선택자에 @extend를 사용했을 때 선택자가 어떻게 복잡해지는지 보여줍니다.

								.nav {
								  &__item {
								    padding: 8px 16px;
								  }
								}

								.footer-nav__item {
								  @extend .nav__item;
								}

								.nav__item,
								.nav .footer-nav__item {
								  padding: 8px 16px;
								}

.footer-nav__item이 .nav 안에 있을 것이라고 가정한 선택자가 생성되어, 실제 HTML 구조와 다른 CSS가 만들어졌습니다.

해결 방법: 유틸리티 클래스 사용

이런 경우에는 유틸리티 클래스를 사용하는 것이 더 안전한 방법일 수 있습니다.

								.u-nav-item {
								  padding: 8px 16px;
								}

								.nav__item {
								  @extend .u-nav-item;
								}

								.footer-nav__item {
								  @extend .u-nav-item;
								}

								.u-nav-item,
								.nav__item,
								.footer-nav__item {
									padding: 8px 16px;
								}

공통 스타일을 유틸리티 클래스로 분리하면, 의미적 클래스와 스타일 클래스가 분리되어 역할이 더 명확해집니다.

실무에서의 @extend 사용 가이드

사용을 고려해볼 수 있는 경우: 의미적 상속 관계: .btn → .btn-primary처럼 명확한 상속 관계가 있을 때; 스타일 변경 빈도가 낮은 베이스 컴포넌트에만 사용할 때; 파일 크기 최적화가 중요한 프로젝트에서 선택자 그룹화를 통해 이득을 볼 수 있을 때

사용을 피하는 것이 좋은 경우: 깊게 중첩된 선택자가 많은 경우; BEM 네이밍처럼 구조가 명확한 클래스를 사용하는 경우; 동적으로 값이 자주 변경되는 스타일 (예: 색상, 간격, 폰트 크기 등)

권장 패턴: 공통 스타일은 가능한 한 믹스인이나 유틸리티 클래스로 관리; 정적이고 변경 가능성이 낮은 베이스 스타일에 한해 @extend 사용; 플레이스홀더 선택자를 적극적으로 활용해 의도하지 않은 그룹화 방지

정리

@extend 사용 시 주의사항에 대해 알아본 내용을 정리합니다.
@extend의 동작 방식과 문제점을 이해하고, 플레이스홀더 선택자, 믹스인, 유틸리티 클래스 등을 적절히 조합하면 유지보수하기 쉽고 예측 가능한 SCSS 구조를 만들 수 있습니다.

의도하지 않은 그룹화: 일반 클래스를 직접 extend하면 예기치 않은 곳까지 스타일이 퍼질 수 있음
플레이스홀더 선택자: %로 시작하는 컴파일되지 않는 베이스 스타일로, 안전한 상속에 사용
믹스인 대체: 스타일을 복사하는 방식으로, CSS 출력 결과를 더 직관적으로 제어 가능
복잡한 선택자 문제: 중첩 선택자와 함께 사용 시 예상치 못한 선택자가 생성될 수 있음
유틸리티 클래스: 공통 스타일을 분리해 의미적 클래스와 스타일 클래스를 분리
실무 가이드: 정적인 베이스 스타일에는 @extend, 동적인 스타일과 유틸리티에는 믹스인/유틸리티 클래스 권장

다음 페이지에서는 실제 프로젝트에서 @extend와 믹스인을 어떻게 조합해 사용하는지에 대한 실무 예시를 살펴봅니다.