CSS Nesting이란? 선택자 반복을 줄이는 중첩 작성법

CSS를 작성하다 보면 같은 요소를 기준으로 여러 스타일을 나눠 쓰는 경우가 많습니다. 카드 안의 제목, 버튼 안의 아이콘, 폼 안의 입력창처럼 관련된 스타일이 여러 줄로 흩어지면 나중에 수정할 때 구조를 다시 찾아야 합니다.

이럴 때 활용할 수 있는 기능이 CSS Nesting입니다. CSS Nesting은 선택자를 부모 규칙 안에 중첩해서 작성하는 방식입니다. 관련 스타일을 한 묶음 안에서 관리할 수 있어 선택자 반복을 줄이고, CSS 구조를 더 쉽게 읽을 수 있습니다.

다만 중첩이 너무 깊어지면 오히려 선택자가 복잡해질 수 있어 필요한 범위 안에서만 사용하는 것이 좋습니다. 디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 카드, 버튼, 헤더, 폼 같은 UI 스타일을 자주 다루게 됩니다. 이때 CSS Nesting을 이해하고 있으면 관련 스타일을 한곳에 모아 관리하면서도 템플릿 구조를 더 읽기 쉽게 정리할 수 있습니다.

CSS Nesting은 왜 필요할까요?

기존 CSS에서는 같은 부모 요소를 기준으로 하위 스타일을 여러 번 반복해서 작성하는 경우가 많았습니다.

.card {
    padding: 24px;
    border-radius: 16px;
}

.card .card-title {
    font-size: 22px;
    font-weight: 700;
}

.card .card-button {
    margin-top: 20px;
}

이 방식도 문제는 없지만, .card라는 선택자가 반복됩니다. 카드 안의 요소가 많아질수록 CSS가 길어지고, 관련 스타일이 한눈에 들어오지 않을 수 있습니다.

CSS Nesting을 사용하면 같은 내용을 아래처럼 묶어서 작성할 수 있습니다.

.card {
    padding: 24px;
    border-radius: 16px;

    & .card-title {
        font-size: 22px;
        font-weight: 700;
    }

    & .card-button {
        margin-top: 20px;
    }
}

이렇게 작성하면 카드와 관련된 스타일이 한 블록 안에 모입니다. 어떤 요소가 어떤 부모 안에서 쓰이는지 더 쉽게 파악할 수 있습니다.

& 기호는 언제 사용할까요?

CSS Nesting에서 자주 보이는 기호가 &입니다. &는 현재 부모 선택자를 가리키는 표시입니다.

예를 들어 버튼 hover 스타일을 작성할 때 사용할 수 있습니다.

.button {
    background: #111;
    color: #fff;

    &:hover {
        background: #2563eb;
    }
}

여기서 &:hover는 .button:hover와 같은 의미입니다.

상태 클래스를 붙일 때도 사용할 수 있습니다.

.button {
    background: #111;

    &.is-active {
        background: #2563eb;
    }
}

이 코드는 .button.is-active를 의미합니다. 버튼의 기본 상태와 활성 상태를 한곳에 모아둘 수 있어, UI 상태를 관리하기 쉬워집니다.

어떤 UI에 활용하기 좋을까요?

CSS Nesting은 관련 스타일이 한 요소 주변에 모여 있을 때 유용합니다.

예를 들어 카드 UI는 제목, 설명, 이미지, 버튼이 함께 들어가는 경우가 많습니다.

.product-card {
    padding: 24px;
    border: 1px solid #e5e7eb;

    & .title {
        font-size: 20px;
    }

    & .desc {
        margin-top: 8px;
        color: #666;
    }

    & .button {
        margin-top: 18px;
    }
}

이처럼 하나의 컴포넌트 안에서만 쓰이는 스타일이라면 중첩 작성이 잘 맞습니다. 버튼, 카드, 폼, 탭, 헤더 메뉴처럼 하나의 UI 단위로 관리되는 요소는 CSS Nesting을 검토하기 좋습니다. 반대로 여러 페이지에서 공통으로 쓰이는 독립적인 클래스라면 지나치게 특정 부모 안에 묶지 않는 편이 나을 수 있습니다.

너무 깊은 중첩은 피해야 합니다

CSS Nesting을 사용할 때 가장 조심해야 할 부분은 중첩 깊이입니다.

처음에는 관련 스타일을 모으기 위해 사용하지만, 아래처럼 계속 깊어지면 오히려 읽기 어려워집니다.

.header {
    & .nav {
        & .menu {
            & .item {
                & .link {
                    color: #222;
                }
            }
        }
    }
}

이런 구조는 선택자가 길어지고, HTML 구조가 조금만 바뀌어도 CSS 수정 범위가 커질 수 있습니다. 실무에서는 보통 한 UI 단위 안에서 필요한 정도만 중첩하는 편이 좋습니다. 카드 안의 제목, 버튼 hover, 폼 안의 에러 메시지처럼 관계가 분명한 경우에만 사용하는 것이 안전합니다.

템플릿 CSS에서는 어떻게 활용할 수 있을까요?

HTML 템플릿을 수정할 때는 이미 작성된 CSS 위에 커스텀 스타일을 추가하는 경우가 많습니다. 이때 관련 없는 스타일이 여러 파일에 흩어지면 수정 위치를 찾기 어려워집니다.

예를 들어 문의 폼 스타일을 수정한다면 폼 전체, 라벨, 입력창, 안내 문구, 버튼 스타일을 한 묶음으로 관리할 수 있습니다.

.contact-form {
    padding: 32px;
    background: #f8fafc;

    & label {
        display: block;
        margin-bottom: 8px;
    }

    & input {
        width: 100%;
        height: 48px;
    }

    & .submit-button {
        margin-top: 20px;
    }
}

이렇게 작성하면 문의 폼과 관련된 스타일을 한눈에 확인할 수 있습니다. 디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 같은 방식으로 볼 수 있습니다. 카드 섹션, 포트폴리오 목록, 문의 폼, 헤더 메뉴처럼 UI 단위가 분명한 영역은 CSS Nesting으로 관련 스타일을 묶어 관리할 수 있습니다.

CSS Nesting을 사용할 때 확인할 기준

CSS Nesting은 선택자 반복을 줄이는 데 도움이 되지만, 모든 CSS를 중첩해서 작성할 필요는 없습니다.

적용 전에는 아래 기준을 확인하는 것이 좋습니다.

특히 템플릿을 수정할 때는 “코드를 짧게 쓰는 것”보다 “나중에 어디를 수정해야 하는지 쉽게 찾는 것”이 더 중요합니다.

자주 묻는 질문

중첩은 줄이기보다 정리하기 위해 써야 합니다

CSS Nesting은 선택자 반복을 줄이고 관련 스타일을 한곳에 모을 수 있는 작성 방식입니다. 카드, 버튼, 폼처럼 하나의 UI 단위 안에서 여러 하위 요소를 다룰 때 CSS를 더 읽기 쉽게 정리할 수 있습니다.

하지만 중첩을 많이 한다고 좋은 CSS가 되는 것은 아닙니다. 너무 깊은 중첩은 선택자를 더 복잡하게 만들고, HTML 구조 변화에 CSS가 예민하게 반응할 수 있습니다.

디자인키트의 HTML 템플릿이나 웹디자인 소스를 수정할 때도 CSS Nesting은 유용하게 검토할 수 있습니다. 관련 스타일을 한곳에 모아 수정 위치를 쉽게 찾고, 버튼·카드·폼 같은 반복 UI를 더 깔끔하게 관리하는 방향으로 활용하는 것이 좋습니다.