CSS 방법론 - BEM

CSS 방법론 - BEM (Block Element Modifier)

안녕하세요 여러분! 오늘은 CSS 방법론 중 하나인 "BEM (Block Element Modifier)"에 대해 알아보려고 해요! 🚀

BEM은 웹 애플리케이션을 구성하는 요소들을 명확하게 정의하는 방법론이에요. 코드의 일관성을 유지하고 유지보수성을 향상시키는 데에 큰 도움이 됩니다. 😊

왜 BEM을 사용해야 할까요?

웹 애플리케이션을 개발하다 보면 스타일 시트가 복잡해지고 상호작용 가능한 다양한 요소들이 존재합니다. 이때 BEM 방법론을 사용하면 다음과 같은 이점을 얻을 수 있답니다:

• 가독성: BEM은 자체적인 네이밍 규칙을 가지고 있어 코드를 읽고 이해하기 쉽습니다. 각 요소들은 독립적으로 식별 가능한 이름을 갖고 있어 협업과 유지보수가 용이해져요. 📖✨
• 재사용성: BEM은 요소들을 독립적으로 설계하고 스타일링할 수 있도록 도와줍니다. 재사용 가능한 컴포넌트를 만들 수 있으며, 코드의 중복을 최소화하여 효율적인 개발이 가능합니다. ♻️🔁
• 스타일 충돌 방지: BEM은 요소들 간에 스타일 충돌을 방지하기 위해 범위를 명확하게 구분합니다. 각 요소의 클래스는 블록 이름과 요소 이름, 그리고 수정자로 구성되어 겹치는 스타일이 발생하지 않도록 합니다. 🛡️😎

BEM의 구조

BEM은 블록(Block), 요소(Element), 그리고 수정자(Modifier)로 구성되는 구조를 가지고 있습니다. 간단한 예시를 통해 이 구조를 살펴보도록 할게요:

<div class="card">
  <div class="card__header">Header</div>
  <div class="card__content">Content</div>
  <div class="card__footer">Footer</div>
</div>

<div class="card card--highlighted">
  <div class="card__header card__header--big">Big Header</div>
  <div class="card__content">Content</div>
  <div class="card__footer">Footer</div>
</div>

위의 예시에서 "card"라는 블록을 정의하고, 내부에서 "card__header", "card__content", "card__footer"라는 요소들을 사용합니다. 이렇게 각 요소들은 블록 이름과 언더바 두 개의 하이픈을 사용하여 구분합니다. 그리고 필요에 따라 요소에 수정자를 추가할 수 있어요.

BEM의 네이밍 규칙

BEM은 네이밍 규칙을 가지고 있어요. 이 규칙을 잘 따르면 코드의 일관성을 유지할 수 있답니다:

• 블록: 블록은 독립적인 기능을 담당하는 컴포넌트를 의미합니다. 블록은 이름을 가지며, 이름은 의미가 명확하고 유니크해야 합니다. 클래스 이름은 소문자와 하이픈을 사용하여 작성합니다. (예: .card)
• 요소: 요소는 블록의 일부를 의미하는 컴포넌트를 의미합니다. 이때 블록 이름과 요소 이름은 언더바와 하이픈을 사용하여 연결합니다. (예: .card__header)
• 수정자: 수정자는 요소의 상태나 속성을 나타내는 컴포넌트를 의미합니다. 이때 수정자는 요소의 클래스 이름 끝에 더하며, 클래스 이름은 블록 이름 뒤에 두 개의 하이픈을 사용하여 작성합니다. (예: .card__header--big)

이렇게 BEM은 일관된 네이밍 규칙을 가지고 있어 코드를 읽고 이해하기 쉽고 유지보수성을 향상시킵니다. 👍😄

결론

BEM은 웹 애플리케이션에서 요소를 일관성 있게 정의하는 CSS 방법론입니다. 코드의 가독성과 유지보수성을 높이기 위해 BEM을 사용해보세요! 🔍🧩

 

COUPANG

이 포스팅은 쿠팡 파트너스의 활동의 일환으로, 일정한 금액의 수수료를 받게됩니다.