className 짓는게 제일 어려워...! : BEM방법론

 

개발을 하다보면 이름 짓기를 계속하게 된다. 이러다 작명소 차려도 될듯...

팀활동을 할 때 가장 턱 막혔던 부분이 팀 이름 짓기, 팀구호 짓기 였는데 개발을 하며 이름 짓기를 이렇게 많이할 줄을

처음엔 생각이 못했다 : (

그래서 처음엔 classname을 막 짓곤 했는데 개발을 계속하다보니 이게 그냥 지으면 안되는 것이었다!!

협업에서도 규칙을 정하는게 중요하고 내가 리펙토링을 할 때에도 중요하더라.

그래서 이번에 클래스 네임을 짓는 방법을 찾아보았다.

 

BEM 소개 및 기본 원칙

BEM은 웹 개발에서 CSS와 HTML을 구조화하고 유지보수하기 쉽게 만들어주는 방법론이다.

이름은 Block(블록), Element(요소), Modifier(수정자)의 약자를 따온 것.

 

- Block (블록)
블록은 독립적으로 의미를 가지고 있는 페이지의 일부분이나 모듈이다. 단독으로 존재할 수도 있고, 다른 블록 안에 위치할 수도 있습니다. ex) header, menu, button 등

html
Copy code
<div class="header">
    <div class="menu">
        <button class="button">Click</button>
    </div>
</div>

- Element (요소)
요소는 블록의 일부분으로, 블록 내부에서 특정 기능적인 목적을 갖는 부분. 요소는 블록 내부에서만 의미가 있으며, 다른 블록 안에서는 독립적으로 사용할 수 없다. __(언더바 두개)로 구분한다.

ex) menu 블록 안에 위치한 item, link 등

html
Copy code
<div class="menu">
    <div class="menu__item">
        <a class="menu__link" href="#">Home</a>
    </div>
</div>

- Modifier (수정자)
수정자는 블록 또는 요소의 외관, 상태, 행동을 정의하는 데 사용된다. 이를 통해 같은 블록 또는 요소를 다양한 방식으로 스타일링하거나 상태를 변경할 수 있음. 예를 들어, 버튼의 크기나 색상을 변경에 이용가능

--(하이픈 두개)로 구분한다.

html
Copy code
<button class="button button--large button--blue">Click</button>

 

BEM을 적용했을 때와 아닐 때의 차이점

BEM을 적용했을 때

<!-- BEM을 사용한 경우 -->
<div class="header">
    <div class="header__logo">
        <img src="logo.png" alt="로고">
    </div>
    <nav class="header__nav">
        <ul class="header__menu">
            <li class="header__menu-item">
                <a href="#" class="header__menu-link">Home</a>
            </li>
            <li class="header__menu-item">
                <a href="#" class="header__menu-link">About</a>
            </li>
            <!-- ... -->
        </ul>
    </nav>
</div>

 

BEM을 적용하지 않았을 때

<!-- BEM을 사용하지 않은 경우 -->
<div class="header">
    <div class="logo">
        <img src="logo.png" alt="로고">
    </div>
    <nav class="nav">
        <ul class="menu">
            <li class="menu-item">
                <a href="#" class="menu-link">Home</a>
            </li>
            <li class="menu-item">
                <a href="#" class="menu-link">About</a>
            </li>
            <!-- ... -->
        </ul>
    </nav>
</div>

 

▶ BEM을 사용한 경우, 클래스명이 구조화되고 의미가 명확하며, 각 요소와 블록 간의 관계를 파악하기 쉽다.

▶ BEM을 사용하지 않은 경우, 클래스명이 단순해 보일 수 있지만 요소 간의 관계를 파악하기 어렵다.

▶ BEM을 사용하지 않은 경우, CSS 스타일링이나 HTML 구조의 유지보수가 어려울 수 있음.