초보자를 위한 BEM

프로그래밍에서 이름을 짓는 것은 프로그래밍뿐만 아니라 css에서도 쉽지 않습니다. 일부 프로그래머는 이름 지정에 대해 많은 생각을 하지 않습니다. 각 클래스가 가질 이름을 선택할 시간이 충분하지 않다고 합니다. 그것이 사실일 수도 있지만 저품질 코드는 장기적으로 개발하는 데 훨씬 더 오래 걸립니다. 따라서 이름 문제를 해결하는 데는 여러 가지 방법이 있으며 그 중 하나는 BEM(Block-Element-Modifier)으로 알려져 있습니다. 이 게시물에서는 BEM이 무엇이며 이를 사용하여 CSS 코드를 정렬하는 방법에 대해 자세히 살펴보겠습니다.

벰이란?

BEM은 Block, Element, Modifier의 약자입니다. 보다 깨끗하고 읽기 쉬운 CSS 클래스를 작성하기 위한 CSS 명명 규칙입니다.
BEM은 또한 나중에 프로젝트에서 재사용하기 위해 독립적인 CSS 블록을 작성하는 것을 목표로 합니다.

// Blocks are named as standard CSS classes
.block {
}
// Elements declared with 2 underscores, after block
.block__element {
}
// Modifiers declared with 2 dashes, after block or after element
.block--modifier {
}
// element and modifier together
.block__element--modifier {
}

블록이란 무엇입니까?

블록은 독립적이고 재사용 가능하며 일반적으로 웹 페이지의 더 큰 구성 요소입니다. 수정자를 가질 수 있고 요소를 포함할 수 있습니다.
header,nav,section, form,article,aside,footer와 같은 웹 페이지의 더 큰 부분을 블록 예제로 셀 수 있습니다.
예를 들어 LinkedIn의 Header Navigation은 블록으로 사용할 수 있으며 다음과 같이 선언할 수 있습니다.

<header class="global-nav"></header>
<style>
.global-nav {
  // Rules
}
</style>

집단

요소는 블록의 자식입니다. 요소는 하나의 상위 블록만 가질 수 있으며 해당 블록 외부에서 독립적으로 사용할 수 없습니다.linkedIn 헤더 요소의 예는 다음과 같습니다.linkedIn 로고,검색 필드 및 나머지
요소의 이름은 부모 블록의 이름으로 시작해야 하며 그 뒤에 밑줄 두 개, 요소 자체 이름이 와야 합니다.

<header class="global-nav">
  <div class="global-nav__content">
     <div class="global-nav__top-left-part">
        <a href="#" class="global-nav__branding">
           <img class="global-nav__logo" />
        </a>
        <div class="search-global">
           <input class="search-global__input" />
           <div class="search-global__icon-container">
              <img class="search-global__icon" />
           </div>
        </div>

     </div>
     <nav class="global-nav__top-right-part">
       <ul class="gloabl-nav__items">
                    <li class="gloabl-nav__item">
                        <a href="#" class="global-nav__primary-link">  
                            <img class="global-nav__icon"/>

                            <span class="global-nav__primary-link-text">Home</span>
                        </a>
                    </li>


                </ul>
    </nav>
  </div>
</header>

수식어

클래스의 다른 상태 또는 스타일은 수정자로 표시됩니다. 요소뿐만 아니라 블록에도 사용할 수 있습니다.
HTML에서 수정자는 추가 기능을 제공하기 위해 해당 블록/요소와 함께 사용해야 합니다.

<button class="button button--success">
    Success button
</button>
<button class="button button--danger">
    Danger button
</button>

수정자의 이름은 상위 블록 이름으로 시작하고 그 뒤에 2개의 대시가 붙고 자체 이름으로 끝나야 합니다.

차단 — 수정자:

.btn {
  // rules
  .btn--primary {}  // Block modifiers
  .btn--secondary {}
}{% youtube LPHobzrF8xw %}

실제로 확인해보세요:

결론

BEM은 더 깨끗하고 유지하기 쉬운 CSS를 작성하는 새로운 방법입니다. 그러나 BEM이 효과가 없다고 주장하는 일부 주장이 있습니다.
BEM 사용 여부는 귀하, 귀하의 팀 및 프로젝트에 달려 있습니다. 당신의 생각은 무엇입니까? BEM을 선호하십니까?

내 작업이 마음에 든다면 고려하십시오.

더 많은 프로젝트와 기사를 제공할 수 있도록

웹 개발에 대해 더 알고 싶다면 언제든지