BEM이란 무엇입니까?

BEM은 Block, Element, Modifier의 약자로 재사용 가능한 CSS를 만드는 방법론입니다. BEM은 구성 요소 스타일 클래스와 마크업의 관계를 보다 명확하게 만드는 구성 요소 이름 지정 패턴을 제공하여 작동합니다. 예를 들어 웹 페이지의 탐색 구성 요소를 살펴보겠습니다. 포함될 수 있는 일부 항목은 탐색 컨테이너, 목록 및 목록 항목입니다.

블록

nav 구성 요소를 사용하고 있고 nav 컨테이너, 목록 및 목록 항목이 있다는 것을 알고 있으므로 BEM을 사용하여 이러한 항목에 의미 있는 클래스 이름을 지정할 수 있습니다. BEM의 명명 구조는 블록이 nav , container 또는 header 와 같이 명명되는 패턴을 따릅니다. 블록은 웹 페이지(또는 모바일 장치에서 작업하는 경우 화면)의 최상위 항목입니다. 항목이 블록인지 여부를 파악하는 가장 좋은 방법은 자체적으로 의미가 있는지 확인하는 것입니다. 예를 들어 nav 또는 button 항목은 그 자체로 의미가 있습니다. 추가 컨텍스트가 필요 없이 이러한 항목이 무엇인지 정확히 알 수 있습니다. 일부 CSS를 정독하고 .nav를 보면 다른 컨텍스트가 실제로 필요하지 않습니다. 클래스 이름만 읽어도 nav가 무엇인지 정확히 알 수 있습니다.

집단

요소는 nav__list , container__title 및 button__submit 와 같은 이중 밑줄을 사용하여 이름이 지정됩니다. 요소는 블록의 일부이며 독립 실행형 의미가 없습니다. 이것이 의미하는 바를 전달하는 데 도움이 되는 좋은 예는 목록 항목을 생각하는 것입니다. Anli 자체는 독립 실행형 의미가 없습니다. 그것은 무엇과 관련이 있습니까? 어디로 가나요? CSS에 li가 표시되면 마크업에서 li가 어디에 있는지 거의 또는 전혀 알 수 없으며 CSS를 편집할 경우 페이지의 얼마나 많은 li 요소가 영향을 받을지 알 수 없습니다. 그러나 li 이름이 navList__item인 경우 갑자기 이 요소에 의미가 있습니다. 여기에서 블록에는 많은 중첩 요소가 있을 수 있지만 블록은 요소 내에 중첩될 수 없다는 점에 유의하는 것이 중요합니다. 이는 블록 자체가 의미가 있어야 하기 때문입니다.

수정자

수정자는 BEM에서 가장 작은 단위이며 항목의 동작, 상태 또는 모양을 설명하는 데 사용됩니다. 탐색 목록 항목을 가져오면 색상 또는 호버에 대한 수정자가 있을 수 있습니다. BEM에서 이것은 navList__item--blue 또는 navList__item--hover 처럼 보일 것입니다. 두 개의 대시에 유의하십시오. 이것은 BEM 명명 규칙에서 속성을 표시하는 방법입니다.

함께 모아서

이제 BEM 명명 규칙의 기본 사항을 알았으므로 이것이 어떻게 생겼는지 봅시다. 이 게시물 전체에서 논의된 탐색 예제를 사용하면 마크업이 다음과 같이 보일 수 있습니다.

<div className="nav">
    <nav className="nav__container">
      <ul className="nav__list">
        <li className="navList__item--blue">I am blue!</li>
        <li className="navList__item--red">I am red!</li>
        <li className="navList__item--hover">I have a hover state!</li>
      </ul>
    </nav>
</div>

이제 HTML이 어떻게 생겼는지 알았으므로 일부 CSS 클래스를 디자인할 수 있습니다. 생성된 이름에 따라 CSS는 다음과 같이 보일 수 있습니다.

/* Block */
.nav {
  text-decoration: none;
  background-color: white;
  color: #888;
  border-radius: 5px;
  display: inline-block;
  margin: 10px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 5px;
}

/* Element */
.nav__ul {
  background-color: white;
  color: #fff;
  padding-right: 12px;
  padding-left: 12px;
  margin-right: -10px; /* realign button text padding */
  font-weight: 600;
  background-color: #333;
  opacity: 0.4;
  border-radius: 5px 0 0 5px;
}

/* Modifier */
.nav__li--blue {
  color: blue;
  font-size: 28px;
  padding: 10px;
  font-weight: 400;
}

/* Modifier */
.nav__li--red {
  border-color: #0074d9;
  color: white;
  background-color: #0074d9;
}

/* Modifier */
.nav__li--hover: hover {
  border-color: #ff4136;
  color: white;
  background-color: #ff4136;
}

CSS가 프로젝트에서 가장 먼저 본 것이라고 상상해 보십시오. 위와 같은 CSS를 본다면 해당 클래스를 읽고 스타일 지정이 무엇인지 정확히 아는 것이 더 쉬울 것입니다. 이것이 BEM의 가장 큰 장점 중 하나입니다. BEM을 사용하면 HTML과 CSS가 개별적으로 또는 함께 이해되는 방식으로 코드를 디자인할 수 있습니다.

마무리

이것은 완벽한 예가 아니며 나에게 가장 의미있는 방식으로 설계되었음을 기억하십시오. 이것이 바로 BEM이 사용되는 방식입니다. 여기에 모든 것을 적용할 수 있는 접근 방식은 없습니다. 당신이나 당신의 팀이 다른 클래스 이름과 구조를 선호한다면 프로젝트에 가장 적합한 것을 사용하십시오. 여기서 가장 중요한 부분은 코드를 깨끗하고 읽기 쉽고 유지 관리할 수 있도록 유지하는 것입니다. CSS가 이해가 되면 다양한 계단식 규칙과 씨름할 필요 없이 들어가서 수정하고 변경하려는 내용이 무엇인지 정확히 알기가 훨씬 쉽습니다.