초보자를 위한 BEM(Block-Element-Modifier)에 대한 빠른 소개

일반적으로 CSS와 프로그래밍은 명명과 관련하여 결코 간단하지 않습니다. 프로젝트에서 CSS를 다룬 적이 있다면 이름 지정 클래스가 어려운 일이 될 수 있음을 알 것입니다.

그러나 개발자가 깨끗한 코드를 작성하는 데 도움이 되는 몇 가지 방법이 있습니다. 가장 잘 알려진 것은 Block-Element-Modifier(BEM이라고도 함)입니다. 이 짧은 기사에서는 BEM이 무엇인지, 그리고 BEM을 활용하여 더 깨끗하고 간단한 코드를 생성하는 방법을 살펴보겠습니다.

벰이란?

앞에서 언급했듯이 BEM은 Block-Element-Modifier의 약자이며 몇 가지 간단한 규칙을 따르면 간단한 코드를 작성하는 데 도움이 됩니다. 코드에서 BEM을 구현하기 전에 BEM의 다양한 섹션을 살펴보겠습니다. BEM에는 세 가지 주요 부분이 있습니다.

블록

요소

수식어

BEM 방법론이 어떻게 작동하는지 보여주기 위해 아래 샘플 코드로 작업할 것입니다.

<nav>
<span>Company name</span>
   <ul>
      <li>About</li>
       <li>Contact</li>
       <li>Another</li>
    </ul>
</nav>

차단하다

BEM 패러다임을 사용할 때 이전 샘플 코드의 '탐색'은 블록으로 표시됩니다. 이는 위와 같이 자립(독립)이 가능하기 때문이다.

블록은 본질적으로 그 자체로 의미가 있는 고독한 개체입니다. 웹 페이지의 블록은 무엇보다도 nav , header , checkbox 또는 input 일 수 있습니다.

문자, 숫자 또는 대시를 사용하여 블록의 이름을 지정합니다. 샘플 코드에서 nav 블록에는 navbar 클래스가 지정됩니다. 이제 아래와 같은 HTML 코드가 생성됩니다.

<nav class=”navbar”>
<span>Company name</span>
   <ul>
      <li>About</li>
       <li>Contact</li>
       <li>Another</li>
    </ul>
</nav>

요소

요소는 블록의 일부 또는 구성 요소입니다. 상위 컨테이너(블록) 외부에서 사용하면 아무런 의미가 없습니다. 요소에는 확인란 레이블, 탐색 표시줄 로고, 헤더 제목 등이 포함될 수 있습니다.

샘플 코드에서
구성 요소는 탐색 블록의 자식입니다. 따라서 요소로 간주될 수 있습니다. 또한 nav 블록의 자식이기 때문에 span 컴포넌트도 요소로 볼 수 있습니다.

요소의 이름을 지정할 때 세 가지 사항이 관련됩니다.

먼저 요소

를 포함하는 블록의 이름을 씁니다.

두 개의 밑줄이 뒤따름

마지막으로 요소 자체의 이름입니다.
예를 들어 예제 코드에서 <ul> 요소의 이름을 navbar__list 로 지정할 수 있습니다. 또한 <span> 요소의 이름을 navbar__logo 로 지정할 수 있습니다.

<nav class=”navbar”>
<span class=”navbar__logo”>Company name</span>
   <u class=”navbar__list>
      <li class=”navbar__list-item”>About</li>
       <li class=”navbar__list-item”>Contact</li>
       <li class=”navbar__list-item”>Another</li>
    </ul>
</nav>

When applying BEM, we give no attention to the hierarchy of elements. The only thing we care about is the block an element is located inside.

수식어

BEM의 마지막 부분은 수정자입니다. 수정자는 요소 또는 블록에 적용되어 모양을 변경합니다. 수정자로 얻을 수 있는 몇 가지 일반적인 기능에는 버튼의 배경색 변경, 텍스트 크게 만들기, 제목의 글꼴 두께 변경 등이 있습니다.

샘플 코드에서 우리가 적용할 수 있는 몇 가지 명백한 수정자는 탐색 표시줄에 어두운 테마를 적용하고 활성 항목에 대한 활성 상태를 만드는 것입니다.

수정자 이름 지정:

먼저 블록 또는 요소의 이름을 쓰고 두 개의 대시(하이픈)와 적용되는 수정자/스타일의 이름을 씁니다.

<nav class=”navbar navbar--dark”>
<span class=”navbar__logo”>Company name</span>
   <u class=”navbar__list>
      <li class=”navbar__list-item”>About</li>
       <li class=”navbar__list-item”>Contact</li>
       <li class=”navbar__list-item navbar__list-item--active”>Another</li>
    </ul>
</nav>

위의 예제 코드에서 navbar--dark 수정자가 navbar 블록에 적용되어 어두운 테마 색상을 제공합니다.

Note: BEM is used with classes only and not ids. This is because classes allow the repetition of multiple names.

결론

코드를 작성하는 동안 이름을 지정하는 방법을 알아내야 할 때 상당히 부담스러울 수 있습니다. 그러나 BEM을 사용하면 이름 지정의 모든 번거로움을 제거할 수 있으므로 더 깨끗하고 간단한 코드를 작성하는 데 모든 노력을 집중할 수 있습니다.

따라와 주셔서 감사합니다. 이 짧은 튜토리얼에서 유용한 정보를 얻었기를 바랍니다.

이와 같은 콘텐츠에 관심이 있으시면 저를 팔로우하여 더 많은 정보를 얻으십시오.