초보자를 위한 BEM: BEM이 필요한 이유

게시 됨: 2022-03-10

빠른 요약 ↬ CSS 스타일 격리는 BEM 사용의 가장 빈번한 시작점입니다. 그러나 이것은 BEM이 줄 수 있는 최소한의 것입니다. BEM은 프로젝트에 시스템 접근 방식을 제공하고 혼란을 방지합니다.

BEM을 사용하면 코드를 확장 가능하고 재사용할 수 있으므로 생산성이 향상되고 팀워크가 촉진됩니다. 당신이 팀의 유일한 구성원이더라도 BEM은 당신에게 유용할 수 있습니다. 그럼에도 불구하고 많은 개발자는 BEM과 같은 시스템 접근 방식이 프로젝트에 추가 경계를 설정하고 프로젝트를 오버로드하고 번거롭고 느리게 만든다고 생각합니다.

BEM의 모든 주요 측면을 압축된 형태로 수집할 것입니다. 이 기사는 BEM의 기본 아이디어를 단 20분 만에 이해하고 시스템 접근 방식이 프로젝트에 해롭다는 편견을 거부하는 데 도움이 됩니다.

Big BEM은 방법론 , 기술 , 라이브러리 및 도구 로 구성됩니다. 이 기사에서는 방법론 자체에 대해 더 많이 이야기할 것입니다. 왜냐하면 방법론은 수많은 개발자의 집중된 경험이고 모든 프로젝트에 체계적인 접근 방식을 제공하기 때문입니다.

BEM의 몇 가지 실제 사례를 보여주기 위해 BEM 기술을 다루고 라이브러리와 도구를 완전히 건너뛸 것입니다.

이론에서 실습까지:

클래스를 제외한 선택자를 사용하지 않는 주된 이유
BEM의 기초
- 블록 및 요소
- 수정자 및 혼합
- 파일 구조의 블록
방법론의 명확하지 않은 장점
실제 사례: BEM은 CSS만을 위한 것이 아닙니다.
BEM은 맞춤형 시스템입니다

그렇다면 BEM은 영웅인가 악당인가? 그것은 당신에게 달려 있습니다! 그러나 먼저 기사를 읽으십시오.

점프 후 더! 아래에서 계속 읽기 ↓

클래스를 제외한 선택자를 사용하지 않는 주된 이유

BEM 방법론의 기본 규칙 중 하나는 클래스 선택자만 사용하는 것입니다. 이 섹션에서는 그 이유를 설명합니다.

왜 우리는 ID를 사용하지 않습니까?
태그 선택기를 사용하지 않는 이유는 무엇입니까?
범용 선택기를 사용하지 않는 이유는 무엇입니까?
CSS 재설정을 사용하지 않는 이유는 무엇입니까?
중첩 선택기를 사용하지 않는 이유는 무엇입니까?
선택기에서 태그와 클래스를 결합하지 않는 이유는 무엇입니까?
결합된 선택기를 사용하지 않는 이유는 무엇입니까?
속성 선택기를 사용하지 않는 이유는 무엇입니까?

우리는 ID를 사용하지 않습니다(ID 선택기)

ID는 HTML 요소의 고유한 이름을 제공합니다. 이름이 고유하면 인터페이스에서 재사용할 수 없습니다. 이렇게 하면 코드를 재사용할 수 없습니다.

일반적인 오해

JavaScript를 사용하려면 ID가 필요합니다.
최신 브라우저는 ID 또는 클래스와 함께 작동할 수 있습니다. 모든 유형의 선택기는 브라우저에서 동일한 속도로 처리됩니다.
ID는 <label> 태그와 함께 사용됩니다.
컨트롤 내부에 <label> 을 배치하면 ID가 필요하지 않습니다. <input id="ID"><label for="ID">Text</label> 대신 <label><input type="...">Text</label> 를 사용하세요.

우리는 태그 선택기를 사용하지 않습니다

HTML 페이지 마크업이 불안정합니다. 새 디자인은 섹션의 중첩, 제목 수준(예: <h1> 에서 <h3> 으로)을 변경하거나 <p> 단락을 <div> 태그로 바꿀 수 있습니다. 이러한 변경 사항은 태그용으로 작성된 스타일을 손상시킵니다. 디자인이 변경되지 않더라도 태그 세트는 제한됩니다. 다른 프로젝트에서 기존 레이아웃을 사용하려면 동일한 태그에 대해 작성된 스타일 간의 충돌을 해결해야 합니다.

확장된 의미 태그 집합도 모든 레이아웃 요구 사항을 충족할 수 없습니다.

페이지 헤더에 로고가 포함된 경우를 예로 들 수 있습니다. 로고를 클릭하면 사이트의 메인 페이지가 열립니다( index ). 이미지에 <img> 태그를 사용하고 링크에 <a> 태그를 사용하여 태그로 마크업할 수 있습니다.

 <header> <a href="/"> <img src="img.logo.png" alt="Logo"> </a> </header>

텍스트에서 로고 링크와 일반 링크를 구분하려면 추가 스타일이 필요합니다. 이제 로고 링크에서 밑줄과 파란색을 제거하십시오.

 header a { ... }

로고 링크는 기본 페이지에 표시할 필요가 없으므로 색인 페이지 마크업을 변경하십시오.

 <header> <!-- the <a> tag is replaced with <span> --> <span> <img src="img.logo.png" alt="Logo"> </span> </header>

<span> 태그의 밑줄과 파란색을 제거할 필요가 없습니다. 다른 페이지의 로고 링크에 대한 일반적인 규칙을 만들어 보겠습니다.

 header a, header span { ... }

언뜻 보기에 이 코드는 괜찮아 보이지만 디자이너가 레이아웃에서 로고를 제거한다고 상상해 보십시오. 선택기 이름은 로고가 있는 프로젝트에서 제거해야 하는 스타일을 이해하는 데 도움이 되지 않습니다. "헤더" 선택기는 링크와 로고 사이의 연결을 표시하지 않습니다. 이 선택기는 헤더 메뉴의 링크에 속하거나 예를 들어 작성자 프로필에 대한 링크에 속할 수 있습니다. "헤더 범위" 선택자는 헤더의 모든 부분에 속할 수 있습니다.

혼동을 피하기 위해 logo 클래스 선택기를 사용하여 로고 스타일을 작성하십시오.

 .logo { ... }

우리는 CSS 재설정을 사용하지 않습니다

CSS 재설정은 전체 페이지에 대해 생성된 전역 CSS 규칙 집합입니다. 이러한 스타일은 모든 레이아웃 노드에 영향을 미치고 구성 요소의 독립성을 위반하며 재사용을 어렵게 만듭니다.

BEM에서 "재설정" 및 "정규화"는 단일 블록에도 사용되지 않습니다. 재설정 및 정규화는 기존 스타일을 취소하고 다른 스타일로 교체하므로 나중에 어떤 경우에도 변경 및 업데이트해야 합니다. 결과적으로 개발자는 방금 재설정된 스타일을 재정의하는 스타일을 작성해야 합니다.

범용 선택기( `*` )를 사용하지 않습니다.

범용 선택기는 프로젝트에 레이아웃의 모든 노드에 영향을 주는 스타일이 있음을 나타냅니다. 이것은 다른 프로젝트에서 레이아웃의 재사용을 제한합니다:

별표가 있는 스타일을 프로젝트에 추가로 전송해야 합니다. 그러나 이 경우 유니버설 선택기가 새 프로젝트의 스타일에 영향을 줄 수 있습니다.
별표가 있는 스타일은 전송 중인 레이아웃에 추가해야 합니다.

또한 범용 선택기는 프로젝트 코드를 예측할 수 없게 만들 수 있습니다. 예를 들어 범용 라이브러리 구성 요소의 스타일에 영향을 줄 수 있습니다.

일반적인 스타일은 시간을 절약해 주지 않습니다. 종종 개발자는 구성 요소의 모든 여백( * { margin: 0; padding: 0; } )을 재설정하는 것으로 시작하지만 레이아웃과 동일하게 설정합니다(예 margin: 12px; padding: 30px; ).

우리는 중첩 선택기를 사용하지 않습니다

중첩 선택기는 코드 결합을 증가시키고 코드를 재사용하기 어렵게 만듭니다.

BEM 방법론은 중첩 선택자를 금지하지 않지만 너무 많이 사용하지 않는 것이 좋습니다. 예를 들어, 블록의 상태나 할당된 테마에 따라 요소의 스타일을 변경해야 하는 경우 중첩이 적합합니다.

 .button_hovered .button__text { text-decoration: underline; } .button_theme_islands .button__text { line-height: 1.5; }

우리는 결합된 선택기를 사용하지 않습니다

결합된 선택자는 단일 선택자보다 더 구체적이므로 블록을 재정의하기가 더 어렵습니다.

다음 코드를 고려하십시오.

 <button class="button button_theme_islands">...</button>

쓰기 작업을 줄이기 위해 .button.button_theme_islands 선택기에서 CSS 규칙을 설정했다고 가정해 보겠습니다. 그런 다음 블록에 "활성" 수정자를 추가합니다.

 <button class="button button_theme_islands button_active">...</button>

.button_active 선택기는 .button_active 가 .button.button_theme_islands .button.button_theme_islands 작성된 블록 속성을 재정의하지 않습니다. 재정의하려면 블록 수정자 선택기를 .button 선택기와 결합하고 두 선택기가 동일하게 특정하므로 .button.button_theme_islands 아래에 선언합니다.

 .button.button_theme_islands {} .button.button_active {}

간단한 클래스 선택기를 사용하는 경우 스타일을 재정의하는 데 문제가 없습니다.

 .button_theme_islands {} .button_active {} .button {}

우리는 선택기에서 태그와 클래스를 결합하지 않습니다

동일한 선택기(예: button.button )에서 태그와 클래스를 결합하면 CSS 규칙이 더 구체적이 되어 재정의하기가 더 어렵습니다.

다음 코드를 고려하십시오.

 <button class="button">...</button>

button.button 선택기에서 CSS 규칙을 설정했다고 가정해 보겠습니다. 그런 다음 active 수정자를 블록에 추가합니다.

 <button class="button button_active">...</button>

.button_active 선택기는 .button_active 이 button.button button.button 작성된 블록 속성을 재정의하지 않습니다. 더 구체적으로 만들려면 블록 수정자 선택기를 button.button_active 태그와 결합해야 합니다.

프로젝트가 개발됨에 따라 input.button , span.button 또는 a.button 선택기가 있는 블록으로 끝날 수 있습니다. 이 경우 button 블록의 모든 수정자와 모든 중첩 요소에는 각 인스턴스에 대해 네 가지 다른 선언이 필요합니다.

가능한 예외

드문 경우지만 방법론을 통해 태그와 클래스 선택기를 결합할 수 있습니다. 예를 들어, 올바른 레이아웃을 생성할 수 없는 CMS 시스템에서 주석 스타일을 설정하는 데 사용할 수 있습니다.

주석을 사용하여 텍스트를 작성하거나 이미지를 삽입하거나 마크업을 추가할 수 있습니다. 사이트 디자인과 일치하도록 개발자는 사용자가 사용할 수 있는 모든 태그의 스타일을 미리 정의하고 중첩된 블록까지 계단식으로 배열할 수 있습니다.

 <div class="content"> ... <!-- the user's text --> </div> CSS rules: .content a { ... } .content p { font-family: Arial, sans-serif; text-align: center; }

우리는 속성 선택기를 사용하지 않습니다

속성 선택자는 클래스 선택자보다 정보가 적습니다. 증거로 헤더에 검색 양식이 있는 예를 고려하십시오.

 <header> <form action="/"> <input name="s"> <input type="submit"> </form> </header>

선택기 속성을 사용하여 양식 스타일을 작성해 보십시오.

 header input[type=submit], header input[type=checkbox] { width: auto; margin-right: 20px; } header input[type=checkbox] { margin: 0; }

이 예에서는 선택기 이름에서 스타일이 검색 양식에 속하는지 확실히 알 수 없습니다. 클래스를 사용하면 더 명확해집니다. 수업에는 명확하게 작성하는 데 방해가 되는 제한 사항이 없습니다. 예를 들어 다음과 같이 작성할 수 있습니다.

 .form .search { ... }

이제 코드가 덜 모호해지고 스타일이 검색 양식에 속한다는 것이 분명해졌습니다.

그러나 중첩 선택기는 여전히 CSS 규칙을 더 구체적으로 만들고 프로젝트 간에 레이아웃을 전송하는 것을 방지합니다. 중첩을 제거하려면 BEM 원칙을 사용하십시오.

요약 : class 는 프로젝트에서 각 구성 요소의 스타일을 분리할 수 있는 유일한 선택기입니다. 코드의 가독성을 높이고 레이아웃의 재사용을 제한하지 마십시오.

CSS 스타일 격리는 BEM 여정의 가장 빈번한 시작점입니다. 그러나 이것은 BEM이 줄 수 있는 최소한의 것입니다. BEM에서 분리된 독립 구성 요소가 어떻게 배열되어 있는지 이해하려면 블록, 요소, 수정자 및 혼합과 같은 기본 개념을 배워야 합니다. 다음 섹션에서 이 작업을 수행해 보겠습니다.

BEM의 기초

블록 및 요소
수정자 및 혼합
파일 구조의 블록

블록 및 요소

BEM 방법론은 CSS, Sass, HTML, JavaScript 또는 React와 같이 사용되는 기술에 관계없이 적용할 수 있는 보편적인 규칙 집합입니다.

BEM은 다음 작업을 해결하는 데 도움이 됩니다.

레이아웃을 재사용하십시오.
프로젝트 내에서 레이아웃 조각을 안전하게 이동합니다.
프로젝트 간에 완성된 레이아웃을 이동합니다.
안정적이고 예측 가능하며 명확한 코드를 작성하십시오.
프로젝트 디버깅 시간을 줄입니다.

BEM 프로젝트에서 인터페이스는 요소를 포함할 수 있는 블록으로 구성됩니다. 블록은 페이지의 독립적인 구성 요소입니다. 요소는 블록 외부에 존재할 수 없으므로 각 요소는 하나의 블록에만 속할 수 있습니다.

BEM의 처음 두 글자는 B 자물쇠와 E 요소를 나타냅니다. 블록 이름은 항상 고유합니다. 요소에 대한 네임스페이스를 설정하고 블록 부분 사이에 가시적인 연결을 제공합니다. 블록 이름은 구성 요소 간의 연결을 표시하고 레이아웃을 전송할 때 이러한 구성 요소의 일부가 손실되는 것을 방지하기 위해 길지만 명확합니다.

BEM 이름 지정의 전체 기능을 보려면 양식과 함께 이 예제를 고려하십시오. BEM 방법론에 따르면 form 블록을 사용하여 양식을 구현합니다. HTML에서 블록 이름은 class 속성에 포함됩니다.

 <form class="form" action="/">

자체적으로 의미가 없는 양식의 모든 부분( form 블록)은 요소로 간주됩니다. 따라서 검색 상자( search )와 버튼( submit )은 form 블록의 요소입니다. 클래스는 또한 요소가 블록에 속해 있음을 나타냅니다.

 <form class="form" action="/"> <input class="form__search" name="s"> <input class="form__submit" type="submit"> </form>

블록 이름은 특수 구분 기호로 요소 이름과 구분됩니다. BEM 클래식 명명 체계에서 두 개의 밑줄이 구분 기호로 사용됩니다. 무엇이든 구분 기호로 사용할 수 있습니다. 대체 명명 규칙이 있으며 각 개발자는 적합한 명명 규칙을 선택합니다. 중요한 것은 구분 기호를 사용하여 블록을 요소 및 수정자와 프로그래밍 방식으로 구분할 수 있다는 것입니다.

선택기 이름은 양식을 다른 프로젝트로 이동하려면 모든 구성 요소를 복사해야 함을 분명히 합니다.

 .form__search {} .form__submit {}

클래스 이름에 블록과 요소를 사용하면 중요한 문제가 해결됩니다. 중첩 선택자를 제거하는 데 도움이 됩니다. BEM 프로젝트의 모든 선택자는 동일한 가중치를 갖습니다. 즉, BEM에 따라 작성된 스타일을 재정의하는 것이 훨씬 쉽습니다. 이제 다른 프로젝트에서 동일한 양식을 사용하려면 레이아웃과 스타일을 복사하면 됩니다.

BEM 구성 요소의 이름 지정 개념은 블록과 해당 요소 간의 연결을 명시적으로 정의할 수 있다는 것입니다.

수정자 및 혼합

공식적으로 " M "은 수정자를 의미하지만 BEM에서 "혼합"이라는 또 하나의 중요한 개념을 의미하기도 합니다. 수정자와 믹스는 모두 블록과 해당 요소를 변경합니다. 이에 대해 자세히 살펴보겠습니다.

수정자

수정자는 블록 또는 요소의 모양, 상태 및 동작을 정의합니다. 수정자를 추가하는 것은 선택 사항입니다. 수정자를 사용하면 여러 수정자를 사용할 수 있으므로 다양한 블록 기능을 결합할 수 있습니다. 그러나 블록이나 요소에는 동일한 수정자의 다른 값을 할당할 수 없습니다.

수정자가 작동하는 방식을 살펴보겠습니다.

프로젝트에 위의 예와 동일한 검색 양식이 필요하다고 상상해 보십시오. 기능은 같지만 모양이 달라야 합니다(예: 페이지 머리글과 바닥글의 검색 양식이 달라야 함). 양식의 모양을 변경하기 위해 가장 먼저 할 수 있는 일은 추가 스타일을 작성하는 것입니다.

 header .form {} footer .form {}

header .form 선택기는 form 선택기보다 가중치가 더 높기 때문에 한 규칙이 다른 규칙보다 우선 적용됩니다. 그러나 우리가 논의한 바와 같이 중첩 선택기는 코드 결합을 증가시키고 재사용을 어렵게 만들기 때문에 이 접근 방식은 우리에게 적합하지 않습니다.

BEM에서 수정자를 사용하여 블록에 새 스타일을 추가할 수 있습니다.

 <!-- Added the form_type_original modifier--> <form class="form form_type_original" action="/"> <input class="form__search" name="s"> <input class="form__submit" type="submit"> </form>

<form class="form form_type_original"></form> 줄은 블록에 original 값으로 type 수정자가 할당되었음을 나타냅니다. 클래식 구성표에서 수정자 이름은 밑줄로 블록 또는 요소 이름과 구분됩니다.

양식은 고유한 색상, 크기, 유형 또는 디자인 테마를 가질 수 있습니다. 이러한 모든 매개변수는 수정자로 설정할 수 있습니다.

 <form class="form form_type_original form_size_m form_theme_forest"> <form class="form form_type_original form_size_m form_theme_forest">

같은 양식은 다르게 보일 수 있지만 동일한 크기를 유지합니다.

 <form class="form form_type_original form_size_m form_theme_forest"></form> <form class="form form_type_original form_size_m form_theme_sun"></form>

그러나 각 수정자에 대한 선택자는 여전히 동일한 가중치를 갖습니다.

 .form_type_original {} .form_size_m {} .form_theme_forest {}

중요 : 수정자는 원래 블록 구현을 어떤 식으로든 변경하는 추가 스타일만 포함합니다. 이렇게 하면 범용 블록의 모양을 한 번만 설정하고 원래 블록 코드와 다른 기능만 수정자 스타일에 추가할 수 있습니다.

 .form { /* universal block styles */ } .form_type_original { /* added styles */ }

이것이 수정자가 항상 블록과 연관된 요소와 동일한 DOM 노드에 있어야 하는 이유입니다.

 <form class="form form_type_original"></form>

수정자를 사용하여 매우 특정한 경우에 범용 구성요소를 적용할 수 있습니다. 블록 및 요소 코드는 변경되지 않습니다. 필요한 수정자 조합이 DOM 노드에서 생성됩니다.

믹스

혼합을 사용하면 다른 HTML 요소에 동일한 서식을 적용하고 코드 중복을 피하면서 여러 엔티티의 동작과 스타일을 결합할 수 있습니다. 추상 래퍼 블록을 대체할 수 있습니다.

혼합이란 단일 DOM 노드에서 여러 BEM 엔터티(블록, 요소, 수정자)를 호스팅하는 것을 의미합니다. 수정자와 유사하게 믹스는 블록을 변경하는 데 사용됩니다. 믹스를 사용해야 하는 경우의 몇 가지 예를 살펴보겠습니다.

블록은 시각적으로 뿐만 아니라 의미적으로도 다를 수 있습니다. 예를 들어, 검색 양식, 등록 양식, 케이크 주문 양식이 모두 양식입니다. 레이아웃에서는 "form" 블록으로 구현되지만 공통된 스타일은 없습니다. 수정자로 이러한 차이를 처리하는 것은 불가능합니다. 이러한 블록에 대해 공통 스타일을 정의할 수 있지만 코드를 재사용할 수는 없습니다.

 .form, .search, .register { ... }

혼합을 사용하여 동일한 형식에 대해 의미적으로 다른 블록을 만들 수 있습니다.

 <form class="form" action="/"> <input class="form__search" name="s"> <input class="form__submit" type="submit"> </form>

.form 클래스 선택기는 모든 양식(주문, 검색 또는 등록)에 적용할 수 있는 모든 스타일을 설명합니다.

 .form {}

이제 범용 형식에서 검색 형식을 만들 수 있습니다. 이렇게 하려면 프로젝트에서 추가 search 클래스를 만듭니다. 이 클래스는 검색만 담당합니다. .form 및 .search 클래스의 스타일과 동작을 결합하려면 다음 클래스를 단일 DOM 노드에 배치합니다.

 <form class="form search" action="/"> <input class="form__search" name="s"> <input class="form__submit" type="submit"> </form>

이 경우 .search 클래스는 동작을 정의하는 별도의 블록입니다. 이 블록은 양식, 테마 및 크기를 담당하는 수정자를 가질 수 없습니다. 이러한 수정자는 이미 범용 형식에 속합니다. 믹스는 이러한 블록의 스타일과 동작을 결합하는 데 도움이 됩니다.

구성 요소의 의미가 변경된 예를 하나 더 들어보겠습니다. 다음은 모든 항목이 링크인 페이지 헤더의 탐색 메뉴입니다.

 <nav class="menu"> <a class="link" href=""></a> <a class="link" href=""></a> <a class="link" href=""></a> </nav>

링크 기능은 이미 link 블록에 구현되어 있지만 메뉴 링크는 텍스트의 링크와 시각적으로 달라야 합니다. 메뉴 링크를 변경하는 방법에는 여러 가지가 있습니다.

항목을 링크로 바꾸는 메뉴 항목 수정자를 만듭니다.
```
 <nav class="menu"> <a class="menu__item menu__item_link" href=""></a> <a class="menu__item menu__item_link" href=""></a> <a class="menu__item menu__item_link" href=""></a> </nav>
```
이 경우 수정자를 구현하려면 '링크' 블록 동작과 스타일을 복사해야 합니다. 이것은 코드 중복으로 이어질 것입니다.
`link` 범용 블록과 `menu` 블록의 `item` 요소를 혼합하여 사용합니다.
```
 <nav class="menu"> <a class="link menu__item" href=""></a> <a class="link menu__item" href=""></a> <a class="link menu__item" href=""></a> </nav>
```
두 BEM 엔터티를 혼합하여 이제 `link` 블록에서 기본 링크 기능을 구현하고 `menu` 블록에서 추가 CSS 규칙을 구현하고 코드 중복을 방지할 수 있습니다.

외부 기하학 및 위치 지정: 추상 HTML 래퍼 포기

믹스는 다른 블록에 상대적으로 블록을 배치하거나 블록 내부에 요소를 배치하는 데 사용됩니다. BEM에서 지오메트리 및 위치 지정을 담당하는 스타일은 상위 블록에 설정됩니다. 헤더에 배치해야 하는 범용 메뉴 블록을 살펴보겠습니다. 레이아웃에서 블록은 상위 블록에서 20px 들여쓰기를 해야 합니다.

이 작업에는 몇 가지 솔루션이 있습니다.

메뉴 블록에 대해 들여쓰기가 있는 스타일 작성:
```
 .menu { margin-left: 20px; }
```
이 경우 "메뉴" 블록은 더 이상 보편적이지 않습니다. 페이지 바닥글에 메뉴를 배치해야 하는 경우 들여쓰기가 다를 수 있으므로 스타일을 편집해야 합니다.

메뉴 블록 수정자 만들기:

 <div> <ul class="menu menu_type_header"> <li class="menu__item"><a href=""></a></li> <li class="menu__item"><a href=""></a></li> <li class="menu__item"><a href=""></a></li> </ul> </div>

 .menu_type_header { margin-left: 20px; } .menu_type_footer { margin-left: 30px; }

이 경우 프로젝트에는 두 가지 종류의 메뉴가 포함되지만 그렇지 않습니다. 메뉴는 그대로 유지됩니다.

블록의 외부 위치 지정: 모든 들여쓰기를 설정하는 추상 래퍼(예: `wrap` 블록)에 `menu` 블록을 중첩합니다.
```
 <div class="wrap"> <ul class="menu"> <li class="menu__item"><a href=""></a></li> <li class="menu__item"><a href=""></a></li> <li class="menu__item"><a href=""></a></li> </ul> </div>
```
수정자를 만들고 블록 스타일을 변경하여 페이지에 블록을 배치하려는 유혹을 피하려면 한 가지를 이해해야 합니다.

상위 블록의 들여쓰기는 중첩 블록의 기능이 아닙니다. 부모 블록의 기능입니다. 중첩된 블록은 경계에서 특정 픽셀 수만큼 들여써야 한다는 것을 알아야 합니다.
믹스를 사용하십시오. 중첩된 블록 위치에 대한 정보는 상위 블록 요소에 포함됩니다. 그런 다음 상위 블록 요소가 중첩 블록에 혼합됩니다. 이 경우 중첩 블록은 들여쓰기를 지정하지 않으며 어디서나 쉽게 재사용할 수 있습니다.

예제를 계속 진행해 보겠습니다.

 <div> <ul class="menu header__menu"> <li class="menu__item"><a href=""></a></li> <li class="menu__item"><a href=""></a></li> <li class="menu__item"><a href=""></a></li> </ul> </div>

이 경우 header__menu 요소를 통해 menu 블록의 외부 지오메트리 및 위치를 설정합니다. menu 블록은 들여쓰기를 지정하지 않으며 쉽게 재사용할 수 있습니다.

부모 블록 요소(이 경우 header__menu )는 블록의 외부 위치 지정을 담당하는 래퍼 블록의 작업을 수행합니다.

파일 구조의 블록

모든 BEM 프로젝트는 유사한 파일 구조를 가지고 있습니다. 친숙한 파일 구조를 통해 개발자는 프로젝트를 탐색하고, 프로젝트 간에 전환하고, 한 프로젝트에서 다른 프로젝트로 블록을 쉽게 이동할 수 있습니다.

각 블록의 구현은 별도의 프로젝트 폴더에 저장됩니다. 각 기술(CSS, JavaScript, 테스트, 템플릿, 문서, 이미지)은 별도의 파일에 있습니다.

예를 들어, input 블록 모양이 CSS로 설정된 경우 코드는 input.css 파일에 저장됩니다.

 project common.blocks/ input/ input.css # The "input" block implementation with CSS input.js # The "input" block implementation with JavaScript

수정자 및 요소에 대한 코드도 블록의 별도 파일에 저장됩니다. 이 접근 방식을 사용하면 블록 구현에 필요한 수정자와 요소만 빌드에 포함할 수 있습니다.

 project common.blocks/ input/ input.css # The "input" block implementation with CSS input.js # The "input" block implementation with JavaScript input_theme_sun.css # The "input_theme_sun" modifier implementation input__clear.css # The "input__clear" element implementation with CSS input__clear.js # The "input__clear" element implementation with JavaScript

프로젝트 탐색을 개선하려면 블록 수정자를 디렉토리의 여러 값과 결합하십시오.

모든 BEM 프로젝트의 파일 구조는 재정의 수준으로 구성됩니다(여기에서 자세히 알아볼 수 있음). 재정의 수준을 통해 다음을 수행할 수 있습니다.

프로젝트를 플랫폼으로 나눕니다.
프로젝트에 포함된 블록 라이브러리를 쉽게 업데이트합니다.
공통 블록을 사용하여 여러 프로젝트를 개발하십시오.
프로젝트 논리에 영향을 주지 않고 디자인 테마를 변경합니다.
라이브 프로젝트에서 실험을 수행합니다.

블록을 사용하고 모든 블록 기술을 동일한 폴더에 저장하면 프로젝트 간에 블록을 쉽게 이동할 수 있습니다. 레이아웃과 함께 블록의 모든 스타일과 동작을 이동하려면 블록 폴더를 새 프로젝트에 복사하기만 하면 됩니다.

방법론의 명확하지 않은 장점

병렬 개발의 편리함

BEM에서 모든 레이아웃은 블록으로 나뉩니다. 블록은 독립적이기 때문에 여러 개발자가 병렬로 개발할 수 있습니다.

개발자는 다른 프로젝트에서 재사용할 수 있는 범용 구성 요소로 블록을 만듭니다.

링크, 버튼 및 입력 필드와 같은 범용 블록이 포함된 bem-components 블록 라이브러리가 한 예입니다. 범용 구성 요소에서 더 복잡한 블록을 만드는 것이 더 쉽습니다. 예를 들어 선택기 또는 확인란입니다.

프로젝트 레이아웃에서 블록을 사용하면 여러 개발자가 작성한 코드를 통합하는 시간을 절약하고 구성 요소 이름의 고유성을 보장하며 개발 단계에서 블록을 테스트할 수 있습니다.

레이아웃 테스트

특히 데이터베이스에 연결된 동적 프로젝트에서 전체 페이지의 기능을 테스트하는 것은 문제가 됩니다.

BEM에서 각 블록은 테스트를 다룹니다. 테스트는 Javascript 또는 CSS와 같은 블록 구현 기술입니다. 블록은 개발 단계에서 테스트됩니다. 한 블록의 정확성을 확인한 다음 테스트된 블록에서 프로젝트를 조립하는 것이 더 쉽습니다. 그런 다음 블록 래퍼가 올바르게 작동하는지 확인하기만 하면 됩니다.

프로젝트의 사용자 정의 빌드

편리한 개발을 위해 BEM 프로젝트의 모든 블록과 기술은 별도의 폴더와 파일에 배치됩니다. 소스 파일을 단일 파일로 결합하기 위해(예: 모든 CSS 파일을 project.css 에, 모든 JS 파일을 project.js 에 넣는 등) 빌드 프로세스를 사용합니다.

빌드는 다음 작업을 수행합니다.

프로젝트의 파일 시스템에 흩어져 있는 소스 파일을 결합합니다.
프로젝트에 필요한 블록, 요소 및 수정자(BEM 엔터티)만 포함합니다.
엔티티를 포함하는 순서를 따릅니다.
빌드 중에 소스 파일 코드를 처리합니다(예: LESS 코드를 CSS 코드로 컴파일).

빌드에 필요한 BEM 엔터티만 포함하려면 페이지에서 사용되는 블록, 요소 및 수정자 목록을 생성해야 합니다. 이 목록을 선언 이라고 합니다.

BEM 블록은 독립적으로 개발되고 파일 시스템의 별도 파일에 배치되기 때문에 서로에 대해 '알지' 못합니다. 다른 블록을 기반으로 블록을 작성하려면 종속성을 지정하십시오. 이를 담당하는 BEM 기술인 deps.js 파일이 있습니다. 종속성 파일을 통해 빌드 엔진은 프로젝트에 포함되어야 하는 추가 블록을 알 수 있습니다.

실제 사례: BEM은 CSS만을 위한 것이 아닙니다.

이전 섹션에서 모든 코드 예제는 CSS에 대한 것입니다. 그러나 BEM을 사용하면 CSS에서와 같은 선언적 방식으로 HTML에서 블록의 동작과 해당 표현을 수정할 수 있습니다.

BEM에서 템플릿을 사용하는 방법

HTML에서 블록 마크업은 페이지에 블록이 나타날 때마다 반복됩니다. HTML 마크업을 수동으로 만든 다음 오류를 수정하거나 변경해야 하는 경우 블록의 모든 인스턴스에 대한 마크업을 수정해야 합니다. HTML 코드를 생성하고 수정 사항을 자동으로 적용하기 위해 BEM은 템플릿을 사용합니다. 블록은 HTML로 표시되는 방식을 담당합니다.

템플릿을 사용하면 다음을 수행할 수 있습니다.

템플릿 변경 사항이 모든 프로젝트 블록에 자동으로 적용되기 때문에 프로젝트 디버깅에 사용되는 시간을 줄입니다.
블록 레이아웃을 수정합니다.
현재 레이아웃의 블록을 다른 프로젝트로 이동합니다.

BEM은 두 가지 엔진을 특징으로 하는 bem-xjst 템플릿 엔진을 사용합니다.

BEMHTML
페이지의 BEMJSON 설명을 HTML로 변환합니다. 템플릿은 .bemhtml.js 파일에 설명되어 있습니다.
벰트리
데이터를 BEMJSON으로 변환합니다. 템플릿은 .bemtree.js 파일의 BEMJSON 형식으로 설명됩니다.

템플릿이 블록에 대해 작성되지 않은 경우 템플릿 엔진은 기본적으로 블록에 대한 <div> 태그를 설정합니다.

블록 선언과 HTML 출력을 비교합니다.

선언:

 { block: 'menu', content: [ { elem: 'item', content: { block: 'link'} }, { elem: 'item', elemMods: { current: true }, // Set the modifier for the menu item content: { block: 'link' } } ] }

HTML:

 <div class="menu"> <div class="menu__item"> <div class="link"></div> </div> <div class="menu__item menu__item_current"> <div class="link"></div> </div> </div>

menu 블록 레이아웃을 수정하려면 블록에 대한 템플릿을 작성해야 합니다.

menu 블록 태그를 변경해 보겠습니다.

 block('menu')( tag()('menu') // Set the "menu" tag for the menu block )

수정된 HTML:

 <menu class="menu"> <!-- Replace the "div" tag with the "menu" tag for the "menu" block --> <div class="menu__item"> <div class="link"></div> </div> <div class="menu__item menu__item_current"> <div class="link"></div> </div> </menu>

CSS와 유사하게 템플릿은 페이지의 모든 "메뉴" 블록에 적용됩니다.

내부 래퍼로 작동하고 menu 블록의 요소 레이아웃을 담당하는 추가 요소( menu__inner )를 추가합니다. 원래 menu__inner 요소는 선언에 포함되지 않았으므로 템플릿을 빌드할 때 추가해야 합니다.

BEM 템플릿은 JavaScript로 작성되므로 JavaScript를 사용하여 템플릿에 새 요소를 추가할 수도 있습니다.

 block('menu')( tag()('menu'), content()(function() { return { elem: 'inner', content: this.ctx.content }; }) )

 <menu class="menu"> <!-- Replace the "div" tag with the "menu" tag for the "menu" block --> <div class="menu__inner"> <div class="menu__item"> <div class="link"></div> </div> <div class="menu__item menu__item_current"> <div class="link"></div> </div> </div> </menu>

모든 inner 및 item 요소에 대한 태그 교체:

 block('menu')( tag()('menu'), content()(function() { return { elem: 'inner', content: this.ctx.content } }), elem('inner')( tag()('ul') ), elem('item')( tag()('li') ) )

 <menu class="menu"> <ul class="menu__inner"> <li class="menu__item"> <div class="link"></div> </li> <li class="menu__item menu__item_current"> <div class="link"></div> </li> </ul> </menu>

페이지의 모든 링크에 대해 <a> 태그를 설정합니다.

 block('menu')( tag()('menu'), content()(function() { return { elem: 'inner', content: this.ctx.content } }), elem('inner')( tag()('ul') ), elem('item')( tag()('li') ) ); block('link')( tag()('a') );

 <menu class="menu"> <ul class="menu__inner"> <li class="menu__item"> <a class="link"></a> </li> <li class="menu__item menu__item_current"> <a class="link"></a> </li> </ul> </menu>

기존 템플릿을 수정합니다. 템플릿의 규칙은 CSS에서와 같은 방식으로 적용됩니다. 낮은 규칙이 상위 규칙보다 우선 적용됩니다. 템플릿에 새 규칙을 추가하고 링크 태그를 <a> 에서 <span> 으로 변경합니다.
```
 block('link')( tag()('a') ); block('link')( tag()('span') );
```
```
 <menu class="menu"> <ul class="menu__inner"> <li class="menu__item"> <span class="link"></span> </li> <li class="menu__item menu__item_current"> <span class="link"></span> </li> </ul> </menu>
```

BEM은 맞춤형 시스템입니다

BEM 방법론은 프로젝트에서 시스템을 생성하기 위한 엄격한 규칙을 제공합니다. 그러나 동시에 많은 BEM 규칙을 사용자 지정할 수 있습니다. BEM 방법론을 사용하면 명명 규칙을 변경하거나 가장 편리한 파일 구조를 선택하거나 원하는 기술을 블록에 추가할 수 있습니다.

이제 시스템을 조정하고 BEM의 슈퍼히어로를 만들 수 있습니다!

BEM을 최대한 활용하는 방법

BEM 원리 학습을 시작하려면 당사 웹사이트를 방문하십시오. 팀에 질문하고 싶은 사항이 있으면 Telegram 채널에 가입하거나 BEM 포럼에서 토론을 시작하십시오.