BEM 방법론

마크업작성 규칙중에 bem방법론이 있어서 정리해보았다.

Block Element Modifier (블록 요소 기능)

즉 태그 클래스명을 작성할때 블록-요소-기능 순으로 작성하는것이다.
  • HTML 마크업 모듈화 가능.
  • 클래스만사용
  • 이름을 연결할땐 block-name 처럼 하이픈하나로 연결
  • 키-벨류 타입도 있음 이건 성질-내용을 작성

장점

  • 클래스명 중복방지
  • 직관적임
  • DOM구조 파악이 쉽다.

네이밍 방법은

  • 블록네임__요소네임–기능 ex) gnb__list–active
  • 이름지을땐 하이픈으로 표시 ex) best-rooms__img-wrap (best-rooms가 블록이름, img-wrap이 요소이름)

예를들어 헤더를 작성한다고 하면 아래와 같이 작성할 수 있다.

<header class="header">
        <div class="header__logo">
            <h1 class="logo">
                <a href="#none" class="logo__link">
                    <img src="images/logo.png" class="logo__img" alt=로고>
                </a>
            </h1>
        </div>
    </header>

콘텐츠라면(리스트라고치고)

<section class="contents__box">
    <h2 class="title-type1">인기숙소</h2> <!-- 타이틀은 타이틀모듈 -->
    <ul class="best-rooms">
        <li class="best-rooms__list">
            <a href="#none" class="best-rooms__link">
                <div class="best-rooms__img-wrap">
                    <img src="images/place-01.jpg" class="best-rooms__img" alt="H Avenue 역삼점 호텔">
                </div>
                <div class="best-rooms__info">
                    <strong class="best-rooms__name">H Avenue 역삼점</strong>
                    <div class="best-rooms__price">
                        <span class="best-rooms__halfday">대실 20,000원</span>
                        <span class="best-rooms__oneday">숙박 60,000원</span>
                    </div>
                    <p class="best-rooms__text">
                        조식 무료 이벤트 안내
                        비지니스 고객님! 두분이서 오세요!
                        아메리카노 무료제공
                    </p>
                </div>
            </a>
        </li>
    </ul>
</section>

일단 클래스명을 작성할때 고민을 많이 하게 되는데 bem대로 네이밍을 한다면 좀더 수월할것같다. 다만 직관적이기때문에 다소 클래스명이 길어질 수 있을듯…!!

bem bem방법론