SASS와 BEM
이 문서에서는 SASS와 BEM에 대해 설명합니다.
CSS가 대규모로 커질 때 발생하기 쉬운 혼란과 취약함을 방지하기 위한 개념과 구현 방법을 SASS와 BEM, 그리고 구체적인 예시를 통해 설명하겠습니다.
YouTube Video
SASS와 BEM
파일과 화면의 수가 증가함에 따라 '이 스타일이 어디에 정의되어 있는지 모르겠다'거나 '작은 변경만 했는데 다른 화면이 깨졌다'와 같은 문제가 CSS에서 자주 발생합니다.
이는 CSS가 본질적으로 설계 규칙을 강제하지 않는 언어이기 때문입니다. 이대로 계속 작성하면 의도치 않은 의존성이 증가하게 됩니다.
SASS와 BEM은 CSS를 즉흥적으로 작성하는 것이 아니라 설계하고 관리할 수 있도록 변환해주는 실용적인 기법이며, 이러한 문제를 예방할 수 있습니다. 이 두 가지를 조합하면 스타일의 의미를 명확하게 할 수 있고, 동시에 가독성, 재사용성, 유지보수성도 향상됩니다.
CSS가 쉽게 관리 불가능해지는 이유
다음과 같은 CSS는 시간이 지나 코드를 다시 보면 동작 방식이 이해하기 어려워질 수 있습니다.
1.title {
2 font-size: 16px;
3 color: #333;
4}
5
6.container .title {
7 font-size: 18px;
8}
9
10.sidebar .container .title {
11 color: red;
12}- 이 예시에서는 동일한
.title클래스가 위치에 따라 다르게 보이므로, 이.title에 어떤 스타일이 적용되는지 즉시 알 수 없습니다. - 이처럼 셀렉터가 깊어지고 상위 요소에 대한 의존성이 커질수록, CSS의 영향 범위를 예측하기 어려워지고 수정 시 쉽게 깨질 수 있습니다.
BEM은 '이름을 통해 역할을 표현하는' 명명 규칙입니다
BEM은 Block / Element / Modifier의 약자이며, 클래스 이름에 해당 클래스가 어떤 컴포넌트와 상태를 나타내는지 포함합니다.
- Block은 독립적인 컴포넌트입니다.
- Element는 Block의 내부 요소입니다.
- Modifier는 상태나 변형을 의미합니다.
1.card {}
2.card__title {}
3.card--highlighted {}이 명명 규칙을 사용하면 HTML만 봐도 구조와 역할을 유추할 수 있습니다.
BEM을 사용한 HTML의 기본 형태
다음은 BEM을 활용하여 HTML로 표현한 카드 UI 예시입니다.
1<div class="card card--highlighted">
2 <h2 class="card__title">Title</h2>
3 <p class="card__text">Description</p>
4</div>클래스 이름만 보고도 이것이 'card 컴포넌트', 그 안의 'title', 그리고 '강조된 상태'임을 파악할 수 있습니다. 이것이 BEM의 가장 큰 장점입니다.
하지만 BEM만 사용하면 CSS가 장황해질 수 있습니다.
BEM형식 그대로 CSS를 작성하면 코드의 양이 많아지는 경향이 있습니다.
1.card {
2 padding: 16px;
3}
4
5.card__title {
6 font-size: 18px;
7}
8
9.card__text {
10 font-size: 14px;
11}
12
13.card--highlighted {
14 border: 2px solid orange;
15}여기서 SASS를 활용하면 구조를 유지하면서도 정돈된 코드를 쓸 수 있습니다.
SASS의 중첩을 사용해 BEM을 자연스럽게 표현하기
SASS의 중첩 기능을 사용하면 BEM 구조를 코드에 직접 반영할 수 있습니다.
1.card {
2 padding: 16px;
3
4 &__title {
5 font-size: 18px;
6 }
7
8 &__text {
9 font-size: 14px;
10 }
11
12 &--highlighted {
13 border: 2px solid orange;
14 }
15}&는 부모 셀렉터를 참조하며, BEM 네이밍과 매우 잘 어울립니다.
이 SASS에서 생성된 CSS
위 SASS는 다음과 같은 CSS로 컴파일됩니다.
1.card {
2 padding: 16px;
3}
4
5.card__title {
6 font-size: 18px;
7}
8
9.card__text {
10 font-size: 14px;
11}
12
13.card--highlighted {
14 border: 2px solid orange;
15}겉으로 보기에 같아도, 개발자의 인지적 부담이 크게 줄어듭니다.
Modifier를 안전하게 사용하는 설계법
BEM의 Modifier는 '상태'를 나타내므로, 오버라이드를 위한 용도에 한정하는 것이 핵심입니다.
1.button {
2 padding: 8px 12px;
3 background: #eee;
4
5 &--primary {
6 background: blue;
7 color: white;
8 }
9
10 &--disabled {
11 opacity: 0.5;
12 pointer-events: none;
13 }
14}Modifier를 '추가'가 아니라 '변화'로 취급하면 설계가 더욱 안정적이 됩니다.
Element 중첩은 한 단계까지만 허용
BEM에서는 요소를 너무 깊게 중첩하지 않는 것이 중요합니다.
1.card {
2 &__header {
3 font-weight: bold;
4 }
5
6 &__body {
7 margin-top: 8px;
8 }
9}.card__header__title과 같은 다단계 요소는 Block을 분리해야 할 신호입니다.
SASS 파일 구조 예시
마지막으로, 실제 프로젝트에서 실용적인 SASS 구조 예시를 소개합니다.
1styles/
2├── base/
3│ └── reset.scss
4├── components/
5│ ├── card.scss
6│ └── button.scss
7├── layout/
8│ └── header.scss
9└── main.scss각 컴포넌트를 1 block = 1 파일로 관리하면 망가지기 쉽지 않습니다.
card.scss 예제
1.card {
2 padding: 16px;
3 border: 1px solid #ccc;
4
5 &__title {
6 font-size: 18px;
7 }
8
9 &__text {
10 color: #666;
11 }
12}모든 것이 이 단위에 자급자족되어 있기 때문에, 삭제, 이동, 재사용이 쉬워집니다.
요약
SASS와 BEM은 단순한 유행이 아니라, CSS를 설계 가능한 코드로 바꾸기 위한 실용적인 접근법입니다.
- BEM은 의미와 역할을 명명합니다.
- SASS는 구조를 유지하면서 쉽게 작성할 수 있게 해줍니다.
- 둘을 조합하면 CSS가 쉽게 깨지지 않습니다.
오늘은 CSS를 미래의 나도 이해할 수 있도록 작성해봅시다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.