[RBF] BEM방법론

안지원·2024년 10월 20일
1주차BEMRBFprogrammers

RBF

목록 보기
1/1
post-thumbnail
  • 프로그래머스에서 일주일에 한 번 진행하는 RBF(Random Bit Flip)프로그램을 통해 팀원들끼리 일주일 수업 동안 들은 강의주제에서 더 깊게 공부하고싶거나 혹은 서로 이해가 안되는 부분에 대해 이야기를 나누거나 함께 공부하게 되었다.
  • 우리 팀원은 매 주 로테이션으로 돌아가면서 한명씩 발표자를 맡아 공부해온 내용을 발표하고 돌아가면서 질문을 하는 시간을 가졌다.
  • 첫 번째 발표자는 나였다.


    젭(zep)을 통해 화상회의로 진행되었다.

발표내용

BEM방법론(Block, Element, Modifire)

  • UI를 독립된 블록으로 분리함으로써 복잡한 페이지에서도 간단하고 신속하게 개발을 수행하는 것이 목적
  • 기본적으로는 모듈 기반의 방법이지만, 그 내용이 다른 설계 기법에 비해 엄격하고 강력하여 세계적으로 이름이 알려졌으며 실제로 널리 사용되고 있음
  • BEM방법론을 사용할때 단어의 띄워쓰기는 케밥 케이스를 함께 사용하는게 좋음(파스칼 케이스, 카멜 케이스, 스네이크 케이스 등)

ex) block-name__element-name--modifire-name

기본적인 BEM모델은 Block__Element_Modifire 의 형태를 가지고 있음
그런데 어떤 블로그 기사(MindBEMding)에서 유명해진 Block__Element--Modifire 형태도 널리 사용되고 있음

1. Block

  • Block의 이름은 상태가 아닌 용도를 나타내야함(시멘틱한 의미를 가지고 있어야함)
  • ex) 빨갛다, 크다 등의 형용사 red, big을 쓰는게 아닌 버튼, 상자, 에러 등의 용도를 담고 있는 문장 button, box, error등을 사용해야함
  • Block은 환경에 영향을 미치지 않아야 한다. => Block자체에 대한 외부 지오메트리(?)Margin 또는 Block의 위치 Position 또는 fontSize등을 설정하지 않아야 한다.(Mix요소라면 얘기가 좀 다름)
  • Block요소가 외부환경의 영향을 받게 된다면 기능적으로 독립적이어야 한다는 Block의 정의와 맞지 않게 됨
  • Block들은 서로 중첩될 수 있다.
    ex) header 안에 Menu block, Logo block, Search block, Auth block등이 중첩되어 묶여있다.(근데 header는 Block요소 아닌가요? -> Block요소 안에 또 Block요소가 존재하면 이를 Mix 하는 방법이 있음)

2. Element

  • Block의 복합 부품으로 Block과 별도로 사용할 수 없음(block에 종속된 요소)
  • Element도 상태가 아닌 용도를 나타내게 지어야 한다.
  • Block요소에 언더바 두개( )를 추가해서 이름을 기재함
    ex) Block    Element
  • Element는 서로 중첩될 수 있다.
  • 하지만 Element는 Block의 일부분인 요소들이지 다른 Element의 부분이 아니다.
  • Element는 반드시 Block의 엔티티(구성요소)여야 함
  • 모든 Block이 반드시 Element를 가질 필요는 없다.

+) Block과 Element를 사용해야 하는 시기

  • 구현된 다른 페이지 컴포넌트에 의존하지 않고 코드가 재사용된다 => Block
  • 부모 엔티티(Block)없이 구분해서 사용할 수 없다 => Element
  • 더 작은 부분으로 나뉘어져야 하는 Elements => Block/Mix == Block을 추가하는 방법(Mix방법)
    - BEM에서 Elements의 Elements는 만들 수 없다.

3. Modifire

  • Modifire는 Block 또는 Element의 모양, 상태 또는 동작을 정의함
  • Modifier 이름은 모양, 동작, 상태를 나타냄
    - 어떤 사이즈?, 어떤 테마? => --size--s, --theme--islands
    - 어떻게 다른 것들과 다른가? => --disabled, --focused, --etc
    - 어떻게 행동할 것인가? => --directions--left-top
  • Modifire는 Element처럼 홀로 사용되지 않음(Block또는 Element의 행동, 상태를 변경하는 것이지 대체하는 것이 아님)
  • Modifire는 Boolean과 Key-Value의 2가지 유형이 있음

Modyfire 두 가지 유형
1. boolean

  • Boolean유형은 Modifire의 유무만 중요하고 그 값이 무관할때 사용됨
  • 사용법은 일반적으로 --Modifire의 형식으로 입력한다.
    ex) search-form__button--disabled
  1. key-value
  • key-value유형은 Modifire값이 중요한 경우 사용
  • 만약 사이즈를 의미하는 Modifire를 만들때 size를 key값, s, m, l를 value값으로 표현할 수 있음
  • 사용 방법은 Modifire의 --key--value 형식으로 Modifire 연결자(?)를 2개 사용하면 된다.
    ex) search-form__button--size--s
  • 동일한 key의 다른 value을 지닌 key-value형식 Modifire는 동시에 사용되어선 안된다.
    ex)
<form class="search-form--theme_island search-form--theme_museum"></div>	
<button class="search-form__button--size--s search-form__button--size--m"></button>
<!-- 똑같은 key값(theme, size)를 가지면서 다른 value값(island != museum, s != m)을 가지고 있는 값이 중복 클래스로 들어가면 안됨. -->
  • 동일한 key값으로 지은 선택자는 동일한 속성을 가지고 있을거임 => 동일한 선택자 끼리 속성이 겹치게 됨
  • CSS의 Cascading(?)이라는 원칙으로 인해 마지막에 선언된 속성이 적용되긴 한데 좋은 방식이 아니므로 금지하는 편

4. Mix

  • Block과 Element가 하나의 HTML 요소에 존재하는 것을 의미
  • 코드 중복을 피하면서 여러 BEM 엔티티의 동작과 스타일을 결합
  • 기존 BEM 엔티티를 기반으로 의미상 새로운 인터페이스 컴포넌트를 작성
  • 가급적 상세도를 높이지 않고 Block의 독립성을 유지할 수 있음
    ex) 
<div class="header">	
  <!-- header는 header__search-form을 통해 연결된 속성을 부여하고 search-form을 사용해 search-form만의 독립적인 속성을 부여 -->
  <div class="search-form header__search-form"></div>	
</div>

참고
https://www.youtube.com/watch?v=B70h37mpD74 우아한테크코스 BEM방법론 발표
https://nykim.work/15 BEM방법론 설명 블로그

profile
안지원
frontend개발자가 되기 위해 노력합니다.

0개의 댓글