CSS 네이밍 규칙 비교: BEM, SMACSS, OOCSS

CSS 네이밍 규칙 비교: BEM, SMACSS, OOCSS

CSS 네이밍 규칙은 코드를 깔끔하게 관리하고, 팀원 간의 협업을 원활하게 진행할 수 있도록 도와줍니다. 이 글에서는 BEM, SMACSS, OOCSS라는 세 가지 인기 있는 CSS 네이밍 규칙을 비교해보겠습니다.

BEM (Block, Element, Modifier)

BEM은 Block, Element, Modifier의 약자로, 각각의 단어가 의미하는 바와 같이 컴포넌트를 구성하는 데 사용됩니다.
​

• Block: 재사용 가능한 독립적인 구성요소
• Element: 블록 내부의 구성요소
• Modifier: 블록이나 요소의 상태를 나타내는 플래그

​
BEM의 네이밍 규칙은 다음과 같습니다.
​

• Block: .block
• Element: .block__element
• Modifier: .block--modifier 또는 .block__element--modifier

​
예를 들어, 다음과 같이 BEM 방식으로 코드를 작성할 수 있습니다.

<!-- Block: header -->
<header class="header">
  <!-- Element: logo -->
  <img src="logo.svg" alt="Logo" class="header__logo">

  <!-- Block: navigation -->
  <nav class="navigation">
    <!-- Element: navigation item -->
    <a href="#" class="navigation__item">Home</a>
    <a href="#" class="navigation__item navigation__item--active">About</a>
    <a href="#" class="navigation__item">Contact</a>
  </nav>
</header>

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS는 CSS 구조를 개선하기 위한 아키텍처로, 다음과 같은 카테고리로 구분됩니다.
​

1. Base: 기본 스타일 (태그 선택자, 속성 선택자)
2. Layout: 레이아웃 구조 (헤더, 푸터, 사이드바)
3. Module: 독립적인 컴포넌트 (버튼, 카드, 메뉴)
4. State: 상태에 따른 스타일 (활성화, 비활성화, 숨김)
5. Theme: 테마 관련 스타일

​
SMACSS 네이밍 규칙은 다음과 같습니다.
​

• Layout: .l-
• Module: .m-
• State: .is- 또는 .has-

​
예를 들어, 다음과 같이 SMACSS 방식으로 코드를 작성할 수 있습니다.

<!-- Layout: header -->
<header class="l-header">
    <!-- Module: logo -->
    <img src="logo.svg" alt="Logo" class="m-logo">

    <!-- Module: navigation -->
    <nav class="m-navigation">
        <!-- Element: navigation item -->

        <a href="#" class="m-navigation__item">Home</a>
        <a href="#" class="m-navigation__item is-active">About</a>
        <a href="#" class="m-navigation__item">Contact</a>

    </nav>
</header>

OOCSS (Object-Oriented CSS)

OOCSS는 객체 지향 프로그래밍의 원칙을 CSS에 적용한 아키텍처로, 재사용성과 확장성을 중요시합니다. OOCSS에서는 구조와 스킨을 분리하여 관리하며, 다음과 같은 원칙을 따릅니다.
​

1. 컨테이너와 콘텐츠를 분리한다.
2. 클래스를 모듈화하여 재사용한다.

​
OOCSS 네이밍 규칙은 다음과 같습니다.
​

• 구조 클래스: .object
• 스킨 클래스: .skin

​
예를 들어, 다음과 같이 OOCSS 방식으로 코드를 작성할 수 있습니다.

<!-- Structure: header -->
<header class="header">
  <!-- Skin: logo -->
  <img src="logo.svg" alt="Logo" class="logo">

  <!-- Structure: navigation -->
  <nav class="navigation">
    <!-- Skin: navigation item -->
    <a href="#" class="navigation-item">Home</a>
    <a href="#" class="navigation-item navigation-item--active">About</a>
    <a href="#" class="navigation-item">Contact</a>
  </nav>
</header>

결론

BEM, SMACSS, OOCSS 모두 CSS 코드의 구조화와 관리를 도와주는 네이밍 규칙입니다. 각 방법에는 장단점이 있으며, 프로젝트의 요구사항과 팀원 간의 합의에 따라 선택해 사용할 수 있습니다. 이 글을 통해 각 방법의 특징과 사용 방법을 이해하였다면, 앞으로 개발자들이 작업 중 모르는 부분이 생겼을 때 이 글을 참조하여 효과적인 CSS 작성을 도모할 수 있을 것입니다.