본문 바로가기
프론트엔드/CSS

[CSS] BEM (Block Element Modifier) 표기법

by jinwanseo 2021. 3. 4.
728x90

코드는 가독성이 중요하다.

하지만 코드양이 많아지면 그만큼

클래스명도 다양해지고 구조 또한 복잡해진다.

 

그래서 클래스 명의 명확성과 일관성, 의미론을 유지할수 있는

CSS 표준에는 BEM 표기법이 있다.

 

BEM 은 Block Element Modifier 의 약자이다.

클래스 이름 안에 언더바 두개씩 있고,

마이너스 표시가 그 뒤에 두개씩 있는 경우를

접해본적이 있다면, 그게 BEM 을 활용한 클래스의 표기이다.

예시) main__item--blue 

 

하지만 간혹 보면 BEM 표기법을 

아이디에 사용하는 경우도 종종 있는데,

이는 잘못된 방법으로, 클래스에만 사용하여야 한다.

 

하단의 간단한 예제를 통해

BEM 의 의미를 이해하도록 하자

 

   샘플 예제 

   Html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>BEM Sample</title>
  <style>
    .main {
    display : flex;
    flex-direction : row;
    background: #dddddd;
    justify-content : center;
    align-items : center;
    height : 40vh;
    }

    .main__item{
      width : 80px;
      height: 80px;
      margin : 5px;
    }

    .main__item:nth-child(1){
      background : red;
    }

    .main__item:nth-child(2){
      background : red;
    }

    .main__item--blue {
        width : 80px;
        height: 80px;
        margin : 5px;
        background : blue;
    }

    .main__item:nth-child(3){
      background : red;
    }
  </style>
</head>
<body>
  <section class="main">
    <div class="main__item"></div>
    <div class="main__item"></div>
    <div class="main__item--blue"></div>
  </section>
</body>
</html>

 

    설명

 

Block : <section class="main"></main>

Element : <div class="main__item"></div>

Modifier : <div class="main__item--blue"></div>

 

전체를 감싸고있는 회색의 블록의 클래스 이름은 main으로 하였다.

감싸져있는 내부의 엘리먼트들은 main__item

그안에서 구분하기 위한 엘리먼트는 main__item--blue

 

728x90

댓글