CSS 고급 디자인패턴

CSS CSS 아키텍처 (BEM, OOCSS)

CSS CSS 아키텍처 (BEM, OOCSS) — 고급

CSS 아키텍처 (BEM, OOCSS)

1. 도입 (왜 배워야 하는가)

CSS 아키텍처는 웹 개발에서 스타일을 효율적으로 관리하고 유지보수하기 위해 필수적인 요소입니다. 특히, 여러 개발자가 동시에 작업하는 프로젝트에서는 CSS 코드가 서로 충돌하거나, 가독성이 떨어지기 쉽습니다. BEM(Block Element Modifier)와 OOCSS(Object-Oriented CSS)는 이러한 문제를 해결하기 위한 방법론으로, 코드의 재사용성과 유지보수성을 극대화합니다.

이 두 가지 방법론을 모르면 다음과 같은 문제가 발생할 수 있습니다:

스타일 충돌: 같은 클래스 이름을 사용하는 경우, 스타일이 예상치 못한 대로 적용될 수 있습니다.
유지보수 어려움: 시간이 지나면 코드가 복잡해져서 수정이 어려워질 수 있습니다.
팀워크 저하: 여러 사람이 함께 작업할 때 일관된 규칙이 없으면 협업이 힘들어집니다.

2. 핵심 개념 설명

BEM (Block Element Modifier)

BEM은 웹 페이지를 구성하는 모든 요소를 블록, 엘리먼트, 모디파이어로 나누어 구조화합니다.

블록: 독립적인 구성 요소 (예: 네비게이션 바)
엘리먼트: 블록의 자식 요소 (예: 네비게이션 바의 링크)
모디파이어: 블록이나 엘리먼트의 상태나 변형 (예: 활성화된 링크)

비유: BEM은 건축에서 각 방(블록)과 그 방의 가구(엘리먼트), 가구의 상태(모디파이어)를 관리하는 것과 비슷합니다.

OOCSS (Object-Oriented CSS)

OOCSS는 CSS를 객체 지향적으로 설계하는 방법론입니다. 스타일을 구조와 스킨(모양)으로 분리하여 재사용성을 높입니다.

구조: 레이아웃과 관련된 CSS
스킨: 색상, 폰트 등 디자인 관련 CSS

비유: OOCSS는 자동차의 엔진(구조)과 외관(스킨)을 분리하여, 엔진을 바꾸더라도 외관은 그대로 유지할 수 있는 것과 같습니다.

용어	설명
블록	독립적인 구성 요소
엘리먼트	블록의 자식 요소
모디파이어	블록이나 엘리먼트의 변형
구조	레이아웃과 관련된 CSS
스킨	디자인 관련 CSS

3. 기본 코드 예제

BEM을 사용한 기본적인 예제를 살펴보겠습니다.

/ 블록: button /
.button {
    padding: 10px 20px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 5px;
}

/ 모디파이어: primary /
.button--primary {
    background-color: green;
}

/ 모디파이어: disabled /
.button--disabled {
    background-color: gray;
    cursor: not-allowed;
}

실행 결과:

.button: 기본 버튼 스타일
.button--primary: 기본 버튼 색상을 초록으로 변경
.button--disabled: 버튼이 비활성화된 상태

코드 한 줄씩 동작 설명:

.button 클래스로 기본 버튼 스타일을 정의합니다.
.button--primary 클래스를 통해 버튼의 색상을 초록으로 변경합니다.
.button--disabled 클래스를 통해 비활성화 상태의 버튼 스타일을 정의합니다.

4. 실전 활용 예제

쇼핑몰에서 장바구니를 구현할 때

/ 블록: cart /
.cart {
    border: 1px solid #ccc;
    padding: 20px;
}

/ 엘리먼트: item /
.cart__item {
    display: flex;
    justify-content: space-between;
}

/ 모디파이어: empty /
.cart--empty {
    text-align: center;
    color: gray;
}

이 예제에서는 장바구니(.cart)를 구성하고, 아이템(.cart__item)을 정의하며, 장바구니가 비어있을 때의 스타일(.cart--empty)을 설정합니다.

블로그 포스트 카드 디자인

/ 블록: card /
.card {
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 15px;
}

/ 엘리먼트: title /
.card__title {
    font-size: 1.5em;
    margin-bottom: 10px;
}

/ 엘리먼트: description /
.card__description {
    font-size: 1em;
    color: #666;
}

블로그 포스트 카드를 디자인할 때, 카드(.card)와 제목(.card__title), 설명(.card__description)을 정의합니다.

5. 흔한 실수와 주의사항

실수 1: 클래스명 중복

/ 잘못된 코드 /
.button {
    color: red;
}
.button {
    color: blue; / 마지막 선언이 적용됨 /
}

-> 클래스명이 중복되어 마지막 선언만 적용됩니다.

/ 올바른 코드 /
.button--primary {
    color: blue;
}
.button--secondary {
    color: red;
}

실수 2: 모디파이어 사용 오류

/ 잘못된 코드 /
.button--active {
    background-color: green;
}
.button--active {
    background-color: red; / 이전 스타일이 덮어씌워짐 /
}

-> 모디파이어의 스타일이 중복되어 의도한 색상이 적용되지 않을 수 있습니다.

/ 올바른 코드 /
.button--active {
    background-color: green;
}
.button--inactive {
    background-color: red;
}

6. 정리

BEM과 OOCSS는 CSS의 유지보수성과 재사용성을 높이는 방법론입니다.
BEM은 블록, 엘리먼트, 모디파이어로 구조화하여 스타일 충돌을 방지합니다.
OOCSS는 구조와 스킨을 분리하여 코드의 재사용성을 증가시킵니다.
CSS 아키텍처를 통해 팀원 간의 협업을 원활하게 할 수 있습니다.

다음에 학습하면 좋은 주제: CSS 전처리기(SCSS, LESS)와 CSS 모듈화에 대한 이해.

학습