관리 메뉴

Dev Blog

Block-Element-Modifier (BEM) 본문

BootCamp_Codestates/HTML & CSS

Block-Element-Modifier (BEM)

Yongjae Kim 2020. 11. 8. 19:54

BEM 방법론이란?

 

문제의 요소에 대한 속성에 근거하는 클래스의 이름을 짓는 구조적인 방법을 제시합니다.

예를 들어, header__form--email(차례대로 Block-Element-Modifier)과 같이 클래스명이 표현되는 것인데,

이 방법이 BEM을 활용한 것입니다.

단, BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 수 있습니다.

이러한 클래스명은 BEM방식의 이름을 여러번 반복하여 재사용할 수 있도록 허락하며, HTML과 CSS/Sass 파일에서도 더 일관된 코딩 구조를 만들 수 있게 도와줍니다.

 

Block(전체를 감싸고 있는 블럭요소)

블럭(block)은 문단 전체에 적용된 요소 또는 요소를 담고 있는 컨테이너를 말합니다. 일종의 코딩덩어리.

아래와 같이 헤더, 풋터, 사이드바 등의 영역들이 블럭으로 간주되는 것입니다.

Element

요소(element)는 블럭이 포함하고 있는 한 조각인데,

각 요소는 두개의 밑줄표시(underscore)로 연결하여 블럭 다음에 위치시킵니다.

.block__element { property: value; }

두개의 밑줄표시는 시각적으로 쉽게 그리고 빨리 코드를 찾고 조작할 수 있도록 도와줍니다.

.header__logo { property: value; } 
.header__tagline { property: value; } 
.header__searchbar { property: value; } 
.header__navigation { property: value; }

‘navigation’은 ‘nav’로, ‘tagline’은 ‘tag’ 또는 ‘tagLine’으로 수정 가능하다는 것입니다.

여기서 요점은, 클래스명은 간단하고 명확하며 정확하게 유지해야 한다는 것입니다.

스타일시트와 HTML 역시 **DRY(don’t repeat yourself)**로 유지되어야 하기 때문입니다.

 

Modifiers

modifier은 블럭 또는 요소의 속성입니다. 이 속성은 블럭 또는 요소의 외관이나 상태를 변화시키는 것 입니다.

클래스명의 목적은 그 요소를 반복하여 재사용을 가능토록 하는 것이기에 요소의 스타일이 같은 것이라면 사이트의 다른 영역이라 할지라도 새로운 클래스를 정의하지 않아도 됩니다.

이렇게 하기 위해서는 요소 또는 블럭 다음에 두개의 **하이픈(‘‐‐’)**을 추가하여 modifier을 표시합니다.

.block‐‐modifier {…} 
.block__element‐‐modifier {…}

모든 이름은 간단 명료해야 하고, 절대적으로 필요하지 않는 이상, 추가적인 클래스를 만들거나 똑같은 스타일을 반복해서는 안됩니다.

.header__navigation {…} 
.header__navigation‐‐secondary {…}

만약 부차적인 네비게이션을 사용한다면, 아마도 레이아웃과 여백은 같을 것이나 적용되는 색이 다를 것입니다.

우리는 메인 요소의 스타일을 복제하거나 훨씬 더 좋은 전처리 장치를 활용할 수 있으며 바로 Sass의 @extend 활용으로 부차적인 네비게이션은 메인 요소의 모든 속성을 상속받도록 할 수 있습니다.

 

.header__navigation { 
      background: #008cba; 
      padding: 1rem 0; 
      margin: 2rem 0; 
      text-transform: uppercase; 
} 
.header__navigation‐‐secondary { 
      @extend .header__navigation;background: #dfe0e0; 
}

“하지만 클래스명이 너무 길다.”라고 생각할지 모르겠습니다.

필자의 생각은, BEM 클래스명은 구체적이고 명료하며 HTML 안에서도 읽기 쉬워야 하고, 클래스명이 무엇을 나타내는지 분명하게 전달 되어야 한다 라는 것입니다.

BEM 클래스명을 좋아하는 이유는 각 html 태그에 오직 클래스명 하나만 사용해야 한다는 것입니다.

일반적인 선택자 방식은 아래와 같습니다.

.label .label-default {...} 
.label .label-alert {...}

다음은 BEM 방법론을 활용한 선택자 방식입니다.

.label {...} 
.label‐‐alert {...} 

.label { 
      background: #eee; 
      border-radius: 505; 
      color: #333; 
      font-size: 1rem; 
} 
.label--alert { 
      background: #da4531; 
      color: #fff; 
}

https://t1.daumcdn.net/cfile/tistory/2536364B568F626D19

 

요점

  • HTML 마크업 모듈화
  • block요소를 독립적이고, 재사용 가능한 모듈이라는 개념으로 접근
  • 대표적인 사이트 tuts+
  • 예).block(전체를 감싸고 있는 블록요소)__element(내부 요소)--modifier(기능)
  • prefix 붙여 일종의 네임스페이스개념으로 사용
  • 실제 서비스를 하면 HTML의 구조가 바뀌는 일이 다반사
  • 탐색레벨은 낮고 단순하게 유지하는 것이 유지보수하기 좋음
  • 최근 브라우저 테스트 자동화에 대한 요구가 커지고 있음
  • 쿼리를 단순하게 하기 위해 길고 유니크한 클래스명을 사용하는 것이 좋음

장점

  • class name 중복을 방지한다.
  • 직관적이다 : .gnb__home--active .icon-home
  • 전제 DOM tree 구조를 다시 보지 않아도 된다.

CSS속성은 한줄에 하나만 선언하자!

  • 가독성이 좋고 어느 속성을 어느 위치에 넣을 것인지 고민할 필요가 없어진다.
  • diff 할 때 가독성이 뛰어나다.
  • 빌드시에 minify하는 전략에 효과적이다.

BEM 사용 예제

<div class="media"> 
      <img src="logo.png" alt="Foo Corp logo" class="media__img--rev"> 
      <div class="media__body"> 
            <h3 class="alpha">Welcome to Foo Corp</h3> 
            <p class="lede">Foo Corp is the best, seriously!</p> 
      </div> 
</div> 
.media { ... }
.media__img--rev { ... }
.media__body { ... }

클래스 header 안에 정의된 요소들을 정의한다면 아래와 같이 작성할 수 있습니다.

.header__logo {} 
.header__tagline { ... } 
.header__searchbar { ... } 
.header__navigation { ... } 
.header__navigation { ... } 
.header__navigation--secondary { ... }

마치며

아주 간결한 BEM! 이미 알겠지만, BEM은 훨씬 진화된 시스템입니다.

이것은 우리가 작성하는 코드에 명료함을 가져다 주고, 더 잘 정의할 수 있도록 도와주며, 프론트 엔드 개발면에서 분류의 체계를 설정할 수 있도록 만듭니다.

많은 경험자들에 의하면, BEM 방법론은 프로토타입을 더 효율적으로 만들어 제품 수준의 코드로 빨리 전환하는데 엄청나게 도움을 준다고 합니다.

출처:

https://webclub.tistory.com/263

[Web Club]

 

 

'BootCamp_Codestates > HTML &amp; CSS' 카테고리의 다른 글

웹 앱 화면 설계하기  (0) 2020.11.08
CSS 기초  (0) 2020.11.08
CSS 중급  (0) 2020.11.08
Comments