<div id="readability-page-1" class="page"><div id="body"> <p> <a href="/blog/category/dev">dev</a> |
2025-07-12 </p>  <div><p><a href="https://www.daleseo.com/css-nesting/">CSS 네스팅(CSS nesting)</a>은 <a href="https://sass-lang.com/">SASS</a>같은 CSS 전처리기에서 지원하던 문법인데 표준이 됐다. 모든 CSS 룰은 병렬로 선언이 되기 때문에 관리가 어렵다. <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_cascade/Specificity">우선순위</a>를 이용해서 어느정도 관리할 수는 있지만 여전히 선언이 여기저기 흩어지는 문제는 문법적으로 어떻게 할 방법이 없다. CSS 네스팅 구문을 활용하면 이러한 문제에 어느정도의 공통된 가이드를 만들 수 있다.</p>

<p>CSS 네스팅 기본 문법만 좀 살펴보면 CSS 룰 안에 다른 CSS 룰을 포함해서 선언해서 일종의 상위 룰의 의존성을 갖게 해주는 문법이다.</p>

<pre><code>a {
	b {
		color: green;
	}
}</code></pre>

<p>이 선언은 아래와 같다.</p>

<pre><code>a b {
	color: green;
}</code></pre>

<p>여러 단계로 중첩해서 사용하는 것도 가능하고 CSS 롤 외에 앳-룰(at-rule)도 포함할 수가 있는데 이를 활용해서 반응형 웹디자인의 CSS 관리를 더 효율적으로 할 수 있다.</p>

<p>초기에 반응형 웹디자인이 나왔을 때는 각 기기별 스타일을 완전히 분리해서 선언했다. 모바일용 미디어쿼리 하나에 전체 모바일 CSS 룰 선언을 모두 집어 넣고 <code>mobile.css</code>와 같은 파일로 저장하는 식이었다. 비슷하게 <code>table.css</code>, <code>desktop.css</code>도 각각 따로 만들었다. 만들때는 모바일 먼저 하고 그 다음으로 태블릿, 데스크톱 순서로 작업을 해서 할 만 한데 나중에 수정을 하려면 파일을 다 열어놓고 해당 셀렉터를 모두 분석해야 했다. 현실적으로 기기별로 CSS를 따로 관리하는 방법은 매우 어려웠다.</p>

<p>그래서 나는 좀 다른 방법으로 CSS 룰을 관리하기 시작했다.</p>

<pre><code>a {
	font-size: 12px;
}
@media (min-width: 320px) {
	a {
		font-size: 14px;
	}
}
@media (min-width: 768px) {
	a {
		font-size: 16px;
	}
}

a b {
	color: green;
}
@media (min-width: 320px) {
	a b {
		color: blue;
	}
}
@media (min-width: 768px) {
	a b {
		color: red;
	}
}</code></pre>

<p>CSS 룰을 셀렉터 단위로 다 분리하고 각 셀렉터마다 모든 분기점의 미디어쿼리를 추가했다. 수정할 때 파일을 다 열어놓지 않아도 해당 부분만 이해하면 되기 때문에 조금 수월해 졌지만 너무 많은 셀렉터가 중복되었다.</p>

<p>CSS 네스팅을 사용하면 이를 이렇게 간소화 할 수 있다.</p>

<pre><code>a {
	font-size: 12px;
	@media (min-width: 320px) {
		font-size: 14px;
	}
	@media (min-width: 768px) {
		font-size: 16px;
	}

	b {
		color: green;
		@media (min-width: 320px) {
			color: blue;
		}
		@media (min-width: 768px) {
			color: red;
		}
	}
}</code></pre>

<p>미디어쿼리 안의 셀렉터를 생략 가능해서 보다 이해하기 쉬운 코드 작성이 가능하다. CSS 룰도 모듈별로 구조적으로 작성과 관리가 가능하다. <a href="https://caniuse.com/css-nesting">2023년에 모든 주요 브라우저가 지원</a>을 하게 되어서 상용에서도 어느 정도 쓸 수 있다.</p>
</div>      </div></div>

신현석(Hyeonseok Shin)

CSS 네스팅(CSS nesting)은 SASS같은 CSS 전처리기에서 지원하던 문법인데 표준이 됐다. 모든 CSS 룰은 병렬로 선언이 되기 때문에 관리가 어렵다. 우선순위를 이용해서 어느정도 관리할 수는 있지만 여전히 선언이 여기저기 흩어지는 문제는 문법적으로 어떻게 할 방법이 없다. CSS 네스팅 구문을 활용하면 이러한 문제에 어느정도의 공통된 가이드를 만들 수 있다.
CSS 네스팅 기본 문법만 좀 살펴보면 CSS 룰 안에 다른 CSS 룰을 포함해서 선언해서 일종의 상위 룰의 의존성을 갖게 해주는 문법이다.
a {
	b {
		color: green;
	}
}
이 선언은 아래와 같다.
a b {
	color: green;
}
여러 단계로 중첩해서 사용하는 것도 가능하고 CSS 롤 외에 앳-룰(at-rule)도 포함할 수가 있는데 이를 활용해서 반응형 웹디자인의 CSS 관리를 더 효율적으로 할 수 있다.
초기에 반응형 웹디자인이 나왔을 때는 각 기기별 스타일을 완전히 분리해서 선언했다. 모바일용 미디어쿼리 하나에 전체 모바일 CSS 룰 선언을 모두 집어 넣고 mobile.css와 같은 파일로 저장하는 식이었다. 비슷하게 table.css, desktop.css도 각각 따로 만들었다. 만들때는 모바일 먼저 하고 그 다음으로 태블릿, 데스크톱 순서로 작업을 해서 할 만 한데 나중에 수정을 하려면 파일을 다 열어놓고 해당 셀렉터를 모두 분석해야 했다. 현실적으로 기기별로 CSS를 따로 관리하는 방법은 매우 어려웠다.
그래서 나는 좀 다른 방법으로 CSS 룰을 관리하기 시작했다.
a {
	font-size: 12px;
}
@media (min-width: 320px) {
	a {
		font-size: 14px;
	}
}
@media (min-width: 768px) {
	a {
		font-size: 16px;
	}
}
a b {
	color: green;
}
@media (min-width: 320px) {
	a b {
		color: blue;
	}
}
@media (min-width: 768px) {
	a b {
		color: red;
	}
}
CSS 룰을 셀렉터 단위로 다 분리하고 각 셀렉터마다 모든 분기점의 미디어쿼리를 추가했다. 수정할 때 파일을 다 열어놓지 않아도 해당 부분만 이해하면 되기 때문에 조금 수월해 졌지만 너무 많은 셀렉터가 중복되었다.
CSS 네스팅을 사용하면 이를 이렇게 간소화 할 수 있다.
a {
	font-size: 12px;
	@media (min-width: 320px) {
		font-size: 14px;
	}
	@media (min-width: 768px) {
		font-size: 16px;
	}
	b {
		color: green;
		@media (min-width: 320px) {
			color: blue;
		}
		@media (min-width: 768px) {
			color: red;
		}
	}
}
미디어쿼리 안의 셀렉터를 생략 가능해서 보다 이해하기 쉬운 코드 작성이 가능하다. CSS 룰도 모듈별로 구조적으로 작성과 관리가 가능하다. 2023년에 모든 주요 브라우저가 지원을 하게 되어서 상용에서도 어느 정도 쓸 수 있다.

CSS 네스팅과 미디어쿼리

댓글