🏗️ 12. CSS 아키텍처: 'BEM부터 CSS-in-JS까지'

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 11분(전체) / 핵심 파트만: 6분

🗺️ 이 문서의 흐름
[BEM: 이름 짓기의 규칙] → [CSS Modules와 CSS-in-JS] → [Utility-first의 철학]

🎯 이 문서를 다 읽으면 할 수 있는 것

• BEM 패턴을 활용해 누구나 이해할 수 있는 클래스 이름을 짓습니다.
• 글로벌 네임스페이스 오염 문제를 해결하는 다양한 현대적 기법을 익힙니다.
• 프로젝트의 성격에 맞춰 적절한 CSS 방법론(Module vs Styled vs Tailwind)을 선택합니다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 🐣 영철 ( 신입 ): "영호 님! 제가 공들여 만든 .title 스타일이 다른 페이지에서 만든 똑같은 이름의 .title 때문에 다 깨졌어요. 클래스 이름을 very-special-title-blue-03 이렇게 지어야 하나요? 😭"
• 🦁 영호 ( 리드 ): "영철 님, 그게 바로 CSS의 가장 큰 숙제인 'Global Scope' 문제입니다. 전 세계 개발자들이 이 혼돈을 막으려고 수많은 규칙(Architecture)을 만들었죠. 오늘 그 평화의 도구들을 하나씩 꺼내보겠습니다."

🤔 왜 알아야 하는가

CSS의 가장 큰 약점은 모든 스타일이 전역(Global)에 반영된다는 것입니다. 프로젝트가 커지고 혼자서 만 개 이상의 클래스를 관리하게 되면, 스타일 한 줄 고치는 게 지뢰밭을 걷는 것처럼 무서워집니다.

5년차 이상의 시니어는 단순히 코드가 예쁜 걸 넘어, **'예측 가능한 코드'**를 짭니다. 내가 고친 클래스가 다른 페이지의 버튼을 망가뜨리지 않을 거라는 확신! 그 확신을 주는 것이 바로 아키텍처입니다.

🏷️ 1. BEM: 클래스에 계급을 부여하라

Block, Element, Modifier의 약자로, 가장 유서 깊고 강력한 명명 규칙입니다.

/* 🦁 영호: 클래스 이름만 봐도 HTML 구조가 그려져야 합니다. */
.card {}                   /* Block: 독립적인 컴포넌트 */
.card__title {}            /* Element: 조각 (__ 사용) */
.card__button--disabled {} /* Modifier: 상태나 변형 (-- 사용) */

🐣 영철: "와, 이름은 좀 길어지지만 중복될 일은 절대 없겠네요! 그리고 주석이 없어도 어디에 쓰이는 건지 바로 알겠어요."

🛡️ 2. 스코프 격리: CSS Modules & CSS-in-JS

브라우저가 아닌 빌드 도구의 힘을 빌려 클래스 이름을 고유하게(Hash) 바꾸는 방식입니다.

• CSS Modules: .title이 빌드 시 .title_a8x2로 변해 다른 파일과 충돌하지 않습니다.
• CSS-in-JS (Styled-components, Emotion): 자바스크립트 변수 안에 CSS를 가둡니다. "CSS는 컴포넌트의 일부다"라는 철학입니다.

🦁 영호의 조언:
"최근에는 런타임 오버헤드 때문에 Zero-runtime CSS-in-JS (Vanilla Extract 등)나 Tailwind CSS로 흐름이 넘어가고 있죠. 도구는 변하지만 '격리'와 '유지보수'라는 본질은 같습니다."

⚡ 3. Utility-first: Tailwind의 혁명

클래스를 새로 짓지 말고, 미리 만들어진 속성들(flex, p-4, text-blue-500)을 조립하는 방식입니다.

• 장점: 이름 짓는 고통에서 해방됩니다. 빠른 프로토타이핑이 가능합니다.
• 단점: HTML이 지저분해 보일 수 있고, 라이브러리 의존성이 생깁니다.

📝 마무리 퀴즈

Q1. BEM 방식에서 요소(Element)를 나타내기 위해 사용하는 기호는 무엇인가요?

✅ 정답: __ (이중 언더바)

💡 상세 해설:

• 원리: BEM은 Block__Element--Modifier 구조를 따릅니다. 블록 내부의 구성 요소임을 나타낼 때는 __를 사용합니다.
• 오답 피드백: "영철 님, 하이픈(-) 하나는 일반적인 단어 연결이고, 하이픈 두 개(--)는 상태 변화(Modifier)를 뜻해요. 헷갈리지 마세요!"

Q2. CSS Modules를 사용할 때 얻을 수 있는 가장 큰 기술적 이득은 무엇인가요?

1. CSS 파일 용량이 줄어든다.
2. 애니메이션 구현이 쉬워진다.
3. 클래스 이름이 전역에서 충돌하는 것을 자동으로 방지한다.
4. 모든 브라우저의 하위 호환성을 보장한다.

✅ 정답: 3. 클래스 이름이 전역에서 충돌하는 것을 자동으로 방지한다.

💡 상세 해설:

• 원리: CSS Modules는 빌드 타임에 클래스 이름 뒤에 고유한 해시값을 붙여줍니다. 덕분에 여러 파일에서 같은 이름을 써도 서로 간섭하지 않는 독립적인 '스코프'가 형성됩니다.
• 오답 피드백: "영철 님, 이제 더 이상 .title-final-final-v2 같은 이름을 지을 필요가 없다는 뜻이에요. 해시의 힘을 믿으세요!"

Q3. [영철이의 테스트 타임: 실무 딜레마]
영수 님이 "우리 프로젝트가 점점 커지고 있는데, SASS의 중첩(Nesting) 기능을 써서 선택자를 너무 깊게(예: .header nav ul li a) 짜놓아서 수정이 너무 힘들대요"라고 하십니다. 영호 리드 님이 이를 해결하기 위해 "선택자의 깊이를 1단계로 유지하자"고 권하셨습니다. 영철이가 이를 위해 도입해야 할 명명 규칙은?

✅ 정답: BEM (Block Element Modifier)

💡 상세 해설:

• 원리 설명: BEM은 .block__element 처럼 단일 클래스에 모든 계층 정보를 담습니다. 따라서 CSS를 짤 때 자식 선택자(>)나 중첩을 깊게 쓸 필요가 없어 명시도 관리와 성능 면에서 월등합니다.
• 오답 피드백: "영철 님, 중첩을 많이 쓰는 건 나중에 그 코드를 다시 보고 싶지 않게 만드는 지름길입니다. BEM으로 평면적인 구조를 만드세요."
• 📌 핵심 기억법: "클래스 이름은 길게, 선택자 깊이는 얕게!"

🐣 영철이의 퇴근 일기

오늘은 내 클래스 이름들이 왜 그렇게 엉망이었는지 깨달았다.
.title1, .title_final, .title_real_final... 이런 이름들로 프로젝트를 채웠던 과거의 내가 부끄러워졌다.
BEM을 처음 봤을 때는 __랑 --가 지저분해 보였는데, 막상 써보니 이보다 논리적인 게 없다.

💡 "아키텍처는 제약이 아니라 자유다. 규칙을 따를 때 비로소 거대한 코드의 바다에서 길을 잃지 않을 자유를 얻는다."

영호 님이 "도구는 유행을 타지만, 아키텍처적 사고는 평생 간다"라고 하신 말이 기억에 남는다.
Tailwind를 쓰든 Styled-components를 쓰든, 결국 '관심사를 어떻게 분리할 것인가'가 핵심이라는 거지.
집에 가서 내 엉망진창인 개인 프로젝트 클래스 이름들부터 하나씩 BEM으로 수술해줘야겠다. 오늘도 성장 완료! 🏗️

🔗 더 알아보기

• BEM 공식 가이드 (영문)
• Tailwind CSS: Utility-First 철학