BEM(Block Element Modifier) in CSS

BEM(BEM: Block, Element, Modifier)은 CSS를 체계적으로 쓰는 방법!
코드가 많아질수록 정리가 안 되고 헷갈리기 쉬운데, BEM은 그걸 깔끔하게 관리하도록 도와줌~

쉽게 말하면, 블록(Block), 요소(Element), 수정자(Modifier)라는 3가지 규칙으로 CSS 이름을 짓는 것!

1. Block(블록)

• 웹 페이지에서 독립적인 한 덩어리.
• 예 ➡️ 네비게이션 바, 버튼, 카드 같은 큰 덩어리!
• 이름 예시➡️ menu, card, button

2. Element(요소)

• 블록 안에 있는 작은 부분들.
• 예➡️ 버튼 안의 텍스트, 카드 안의 이미지 같은 것!
• 이름 예시➡️ menu__item, card__image (블록 이름__요소 이름)

3. Modifier(수정자)

• 블록이나 요소의 모양이나 상태를 바꿀 때 쓰는 거야.
• 예 ➡️ "초록색 버튼"이나 "활성화된 메뉴 항목" 같은 상태.
• 이름 예시➡️ button--primary, menu__item--active (이름--수정자)

---

참고

--(수정자)의 역할

--는 수정자(Modifier)를 나타내는 표시야.
➡️ "원래 있던 것에서 조금 다른 버전"이라고 생각하면 돼.

예시: 버튼

• 기본 버튼

  <button class="button">기본 버튼</button>

• 파란색 버튼

  <button class="button button--blue">파란 버튼</button>

• 작은 버튼

  <button class="button button--small">작은 버튼</button>

button--blue와 button--small처럼 --를 붙이면 기본 버튼의 변형(blue, small)을 만들 수 있어.

---

비유: 아이스크림 🍦

• 기본 아이스크림: ice-cream
• 초콜릿 맛: ice-cream--chocolate
• 딸기 맛: ice-cream--strawberry

이렇게 하면 "이건 기본 아이스크림인데, 초콜릿 맛이네!" 하고 쉽게 알아볼 수 있어.

/* Block: 기본 카드 스타일 */
.card {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
}

/* Modifier: 특수한 카드 스타일 */
.card--featured {
  background-color: #f0f8ff; /* 파란색 배경 */
  border-color: #007bff; /* 파란색 테두리 */
}

/* Element: 카드 제목 */
.card__title {
  font-size: 1.5em;
  margin-bottom: 10px;
}

/* Element: 버튼 스타일 */
.card__button {
  padding: 10px 15px;
  font-size: 1em;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

/* Modifier: 버튼 색상 */
.card__button--primary {
  background-color: #007bff;
  color: white;
}

.card__button--secondary {
  background-color: #6c757d;
  color: white;
}

---

언제 쓰이나?

1. 큰 프로젝트에서 CSS 관리
   예를 들어, 쇼핑몰 사이트처럼 복잡한 페이지에서는 버튼, 카드, 네비게이션 등 요소가 많아. 이런 경우 이름이 중복되거나 어디에 쓰이는지 헷갈릴 수 있어.
   BEM은 규칙에 따라 이름을 정하기 때문에 클래스 이름이 중복되지 않고, 이해하기 쉽게 관리할 수 있어.

2. 팀 프로젝트에서 협업
   여러 명이 CSS를 작성하면, 누가 만든 코드인지 파악하기 어려울 수 있어.
   BEM을 쓰면 모두가 같은 규칙으로 이름을 정하니까 코드가 일관성 있게 유지돼.

3. 스타일 재사용
   BEM은 블록, 요소, 수정자로 나눠져 있어서 필요한 부분만 수정하거나 재사용하기 쉬워.

---