개발하는데 다 이유가 있겠지

1. BEM이란?

BEM(Block, Element, Modifier)은 CSS 클래스 네이밍 방법론으로, 코드의 가독성과 유지보수를 높이는 데 도움을 준다. 각 개념은 다음과 같다.

• Block : 독립적인 요소 (예: button, card, header)
• Element : Block 내부의 구성 요소 (예: button__icon, card__title)
• Modifier : Block이나 Element의 상태나 스타일 변형 (예: button--primary, card__title--large)

 

---

 

2. Styled Components와 BEM

Styled Components는 `CSS-in-JS 방식`으로 스타일을 작성하는 라이브러리다. BEM을 적용하면 스타일 구성과 컴포넌트 구조를 명확하게 정리할 수 있다.

 

2.1 기본적인 Styled Components 코드

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }
`;

export default Button;

위 코드는 단순한 스타일링 예제지만, BEM 방법론을 적용하면 더 체계적으로 관리할 수 있다.

 

2.2 BEM 적용하기

import styled from 'styled-components';

const Button = styled.button`
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: #0056b3;
  }

  &--primary {
    background-color: #28a745;
  }

  &--danger {
    background-color: #dc3545;
  }
`;

export default Button;

하지만 Styled Components에서는 `&--primary`와 같은 방식이 제대로 동작하지 않는다. 대신, `props`를 활용하여 동적으로 클래스를 적용할 수 있다.

❗️Modifiers (&--primary같은 것) 제대로 동작하지 않는 이유?
Styled Components는 고유한 클래스명을 자동 생성하므로, `&--primary`같은 선택자가 실제 HTML 클래스와 매칭되지 않아 동작하지 않음
→ `props`를 활용해서 스타일을 동적으로 변경해야 함

 

---

 

3. Styled Components에서 BEM 방식 활용

3.1 Props를 활용한 Modifier 적용

import styled from 'styled-components';

const Button = styled.button<{ variant?: 'primary' | 'danger' }>`
  background-color: ${(props) =>
    props.variant === 'primary' ? '#28a745' :
    props.variant === 'danger' ? '#dc3545' : '#007bff'};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;

  &:hover {
    background-color: ${(props) =>
      props.variant === 'primary' ? '#218838' :
      props.variant === 'danger' ? '#c82333' : '#0056b3'};
  }
`;

export default Button;

위 코드에서 variant prop을 사용하여 primary, danger 스타일을 동적으로 적용할 수 있도록 했다.

 

---

 

3.2 Block과 Element 적용

BEM 방식에서 Block과 Element를 적용하면, 컴포넌트 내부 요소를 쉽게 스타일링할 수 있다.

const Card = styled.div`
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;

  &__title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  &__content {
    font-size: 1rem;
    color: #333;
  }
`;

하지만 Styled Components에서는 `&__title` 같은 BEM 표기법을 직접 사용할 수 없기 때문에, 컴포넌트로 분리하는 것이 좋다.

❗️Elements (&__title같은 것) 직접 사용할 수 없는 이유?
Styled Components는 BEM처럼 특정한 클래스명을 직접 부여하지 않고, 랜덤한 해시 기반의 클래스명을 사용
→ `&__title`같은 BEM 네이밍을 사용할 수 없고, 대신 별도의 Styled Component로 분리해야 함

const Card = styled.div`
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
`;

const CardTitle = styled.h2`
  font-size: 1.5rem;
  font-weight: bold;
`;

const CardContent = styled.p`
  font-size: 1rem;
  color: #333;
`;

export { Card, CardTitle, CardContent };

이렇게 하면 BEM의 Block, Element 개념을 유지하면서 Styled Components의 장점을 살릴 수 있다.

 

---

 

4. 결론

BEM 방법론은 스타일 구조를 명확하게 유지하는 데 유용하며, Styled Components와 함께 사용할 때 props와 컴포넌트 분리를 적절히 활용하면 깔끔한 코드 구조를 유지할 수 있다. BEM의 네이밍 원칙을 따르면서, Styled Components의 장점을 극대화하는 것이 핵심이다.