BEM(Block, Element, Modifier)이란 무엇이며 Drupal Emulsify Twig와 함께 사용하는 방법

게시 됨: 2022-11-08

오픈 소스 기술 및 소프트웨어로 작업할 때 코드를 읽고 이해하는 데 필요한 노력을 단순화하는 것이 훨씬 더 중요합니다. 좋은 명명 규칙은 코드 검토 중에 구문 및 스타일 기본 설정에 초점을 맞추는 것보다 더 큰 문제를 해결하는 데 도움이 됩니다. 노련한 개발자는 스타일 요소가 많은 대규모 웹 사이트에서 작업할 때 잘 작성되고 조직화된 코드의 중요성을 이해합니다.

BEM(Block, Element, Modifier) 방법론은 사용 편의성 때문에 인기를 얻고 있는 CSS 클래스에 대해 널리 사용되는 명명 규칙입니다. BEM의 기본 개념은 컴포넌트 기반 웹 개발입니다. BEM은 특히 복잡한 UI가 있는 대규모 프로젝트를 처리할 때 인터페이스 개발을 쉽고 빠르게 만듭니다. BEM에 대해 자세히 알아보고 Drupal Emulsify Twig 모듈과 함께 작동하는 방법을 살펴보겠습니다.

BEM이란 무엇입니까?

BEM 방법론은 CSS 클래스를 더 쉽게 액세스하고 이해하고 확장할 수 있도록 하기 위해 도입되었습니다. 개발 프로세스를 가속화하고 재사용 가능한 구성 요소를 구축하는 데 도움이 됩니다.

BEM에는 세 부분이 포함됩니다.

차단하다
요소
수정자

차단하다

블록은 가장 바깥쪽에 있고 기능적으로 독립적인 구성 요소이며 재사용할 수 있습니다. 예: 머리글, 바닥글, 사이드바, 메뉴, 콘텐츠 등

특징:

블록 이름은 항상 블록의 목적을 반영해야 합니다.
블록은 여백이나 위치를 사용해서는 안 됩니다. 여백이나 위치를 추가해야 하는 경우 내부 컨테이너에 적용해야 합니다.
BEM을 사용할 때 CSS 태그나 ID 선택기를 사용하지 마십시오.

예시:

 <div class=”icon-button”></div>

요소

요소는 블록의 하위 항목입니다. 각 요소는 하나의 블록만 가질 수 있으며 외부에서 사용할 수 없습니다. 예: 메뉴 항목, 목록 항목, 입력 필드 등

특징:

요소 이름(클래스)은 상태(작은/빨간색)가 아니라 목적(제목, 캡션)을 설명해야 합니다.
요소와 블록은 이중 밑줄(__)로 구분됩니다. 다음과 같이: block-name__element-name.

예시:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

수정자

블록이나 요소의 모양, 상태 또는 동작을 정의할 수 있는 클래스 이름입니다. 예: 빨간색, 대형, 비활성화됨, 고정 등

특징:

수정자 이름은 모양을 설명합니다. 예를 들어 모양이 "_large"인 경우 수정자 클래스는 icon-button__title_large 가 됩니다.
수정자는 단일 밑줄(_)로 블록이나 요소와 구분됩니다.

예시:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

수정자의 유형

1. 부울

boolean 값의 조건을 확인하고 변수에 설정할 수 있습니다. 이 변수는 수정자 값으로 전달할 수 있습니다.

2. 키-값

키-값이 있는 수정자의 전체 이름 구조는 다음 패턴 중 하나를 따릅니다.

block-name_modifier-name_modifier-value
블록 이름__요소 이름_수정자 이름_수정자 값

명명 규칙: 규칙 및 체계

다양한 명명 체계가 있습니다. 모든 구성표에는 다음과 같은 몇 가지 공통 규칙이 있습니다.

이름은 소문자 라틴 문자로 작성됩니다.
단어는 하이픈(-)으로 구분됩니다.

1. 고전적인 명명 체계

클래식 명명 체계는 BEM의 기본 명명 체계입니다.

블록 이름__elem-name_mod-name_mod-val

요소 이름과 블록 이름은 이중 밑줄(__)로 구분됩니다.
수정자 이름과 블록 또는 요소 이름은 단일 밑줄(_)로 구분됩니다.
수정자 값과 수정자 이름은 단일 밑줄(_)로 구분됩니다.

2. 두 개의 대시 명명 스타일

블록 이름__요소 이름--mod-name--mod-val

요소와 블록 이름은 이중 밑줄(__)로 구분됩니다.
블록과 요소는 이중 하이픈(--)으로 구분됩니다.
수정자와 수정자의 값은 이중 하이픈(--)으로 구분됩니다.

3. CamelCase 명명 스타일

blockName-elemName_modName_modVal

첫 단어 뒤의 각 단어는 대문자로 시작합니다.
블록, 요소 및 수정자는 표준 명명 체계에서와 같은 방식으로 사용됩니다.

4. 반응 명명 스타일

BlockName-ElemName_modName_modVal

블록 이름과 요소 이름은 대문자로 시작합니다.
수정자의 이름은 소문자로 시작합니다.
요소 이름과 블록 이름은 단일 하이픈(-)으로 구분됩니다.
수식어의 이름과 값은 표준 체계와 같은 방식으로 구분됩니다.

Emulsify Twig 모듈이 있는 Drupal의 BEM

Drupal에서는 Emulsify Twig 모듈의 도움으로 BEM Twig 기능을 사용할 수 있습니다. BEM 기능을 사용하면 구성 요소의 요소에 BEM 클래스를 만들 수 있습니다. 아래에 언급된 일부 BEM Twig 확장 및 사용법입니다.

1. 단순 블록 이름(필수 인수):

이렇게 하면 다음이 생성됩니다.

2. 수정자로 차단:

여러 수정자를 추가하려면 배열을 사용하면 됩니다.

이렇게 하면 다음이 생성됩니다.

3. 수정자 및 블록 이름이 있는 요소(선택 사항):

이렇게 하면 다음이 생성됩니다.

4. 블록 이름이 있지만 수정자가 없는 요소(선택 사항):

이렇게 하면 다음이 생성됩니다.

5. 블록 이름, 수정자 및 추가 클래스가 있는 요소:

이렇게 하면 다음이 생성됩니다.

6. 추가 클래스만 있는 요소(선택 사항):

이렇게 하면 다음이 생성됩니다.

속성 나뭇가지 확장 추가

속성 추가 Twig 기능을 사용하면 구성 요소의 요소에 HTML 속성을 추가할 수 있습니다. 아래에서 속성 추가 기능을 살펴보십시오.

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

마지막 생각들

BEM 방법론은 넘겨주고 이해하기 쉬운 더 나은 품질의 코드를 작성하고 유지하려는 개발자에게 매우 유용합니다. 모든 요소에는 이름과 해당 블록의 출처로 쉽게 식별할 수 있는 목적이 있습니다. 올바르게 사용하면 BEM을 사용하여 개발 속도를 높일 수 있음을 알 수 있습니다. 읽은 내용이 마음에 들면 주간 뉴스레터에 가입하여 받은 편지함으로 신선하고 뜨거운 통찰력을 보내드립니다!