🟠 BEM

• 'Block,Element,Modifier'의 줄임말
• Yandex사(러시아)가 제창한 component기반 웹 개발 접근법이다.
• UI를 독립된 block으로 분리하여 복잡한 페이지에서도 간단하고 신속하게 개발을 수행하는 것이 목적임.
• 기본적으로는 Module기반의 방법이나, 다른 설계기법에 비해 엄격하고 강력한 규칙을 가지고 있어 세계적으로 유명해졌으며, 널리 사용되는 중임.

1. Block

• 재사용 가능한 기능적으로 독립된 페이지 구성요소.
• BEM을 사용할 때는 id selector를 사용할 수 없음.(=class selector만 사용한다고 생각 가능)
• Block의 이름은 state(상태)가 아닌 해당 block의 purpose(용도)를 의미.
• 각 블럭은 환경에 영향을 미치지 않아야함.(block자체에 대한 외부 margin또는 position을 설정하지 않음.)
• 각 Block들은 서로 중첩사용이 가능.

2. Element

• Block의 복합적인 부품으로 block과 별도로 사용할 수 없음.
• Element의 이름 또한 state(상태)가 아닌 해당 block의 purpose(용도)를 의미.
• 명명법 : block-name_element-name → Block이름 + Element이름을 결합하여 명명한다.
• Element는 항상 Block에 포함되어야 하며, 분리해서 사용이 불가능하다.
• 모든 Block이 Element를 가지는 것은 아님.
• 각 Element 또한 중첩사용이 가능.

3. Modifier

• Block 또는 Element의 모양, 상태 또는 동작을 정의함.
• Modifier 이름은 Appearance(모양), State(상태), Behavior(동작)를 나타냄.
• Modifier는 단독으로 사용되지 않는다.

📍 Modifier의 2가지 유형

‣ Boolean

• Modifier의 유무만 중요하고 그 값은 무관할 때 사용 → disabled, focused
• Boolean Modifier가 있으면 해당 값이 '참'으로 간주됨.
• 명명법 : block-name_modifier-name, block-name_element-name_modifier-name

‣ Key-Value

• Modifier의 값이 중요한 경우에 사용 → size_s , theme_islands
• 명명법 : block-name_modifier-name_modifier-value, block-name_element-name_modifier-name_modifier-value
• MindBEMding : Modifier의 전후 구분문자를 _(언더바 1개)에서 --(하이픈 2개)로 변경한 스타일.

'block-name--modifier-name'
'block-name__element-name--modifier-name'
'block-name--modifier-name--modifier-value'
'block-name__element-name--modifier-name--modifier-value'

4. Mix

• Block과 Element가 하나의 HTML요소 안에 존재하는 것을 의미함.
• 코드 중복을 피하면서 여러 BEM의 Entity(개체)의 동작과 스타일을 결합.
• 기존 BEM Entity를 기반으로 의미상 새로운 인터페이스 컴포넌트를 작성.
• 가급적 상세도를 높이지 않고 Block의 독립성 유지 가능.

🔸 Block vs Element 어떤 걸 만들어야할까? 🔸

• 구현된 다른 페이지 component에 의존하지 않고 코드가 재사용된다. → Block
• 부모 Block없이 구분해서 사용할 수 없다. → Element
• 더 작은 부분으로 나뉘어져야하는 Elements → Block 또는 Mix (BEM에서 Elements의 Elements는 만들 수 없음)

🟡 기존 CSS방법론의 문제점

→ CSS가 HTML의 구조와 강하게 결합되어 있음

1. HTML에 CSS가 의존

• Html에서 스타일이 필요한 요소에 class명을 부여.
• 클래스명이 부여된 요소에 대하여 CSS에서 스타일링 진행.

2. CSS에 HTML이 의존

• CSS에서 Html과 독립적으로 스타일을 선언.
• Html에서는 선언되어 있는 style에 한하여 마크업 작성

🟡 새로운 CSS방법론(Utility-First CSS / Functional CSS)

• 널리 알려진 Utility-First CSS : Tailwind CSS / Tachyons / Atomic CSS
• 시멘틱하고 콘텐츠에 의존하지 않는 CSS를 작성 ✕
• class명만 보아도 CSS의 속성과 값을 바로 유추할 수 있도록 단 하나의 속성과 값을 나타내는 CSS를 사전에 미리 정의
• 미리 정의된 클래스를 마치 HTML 요소에 제공하는 API로 생각하여 API(클래스명)을 html에서 조합해서 사용.

<!-- index.html -->
<button class="w-1/2 rounded-md border border-gray-300">버튼</button>

/* index.css */
.w-1/2 {
  width: 50%;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-gray-300 {
  border-color: rgb(209, 213, 219);
}

📍 기존 inline style과 다른 점

1. 아무 값이나 지정할 수 있는 것이 아님. 사전에 정해진 리스트에서 골라야하므로 전체적ㅇ니 일관성을 높일 수 있음.
   ❌ : font-size : 14px, font:size: 13px, font-size:.9rem, font-size:.85rem
   ✅ : text-sm 또는 text-xs, py-3 또는 py-4, text-dark 또는 text-light
2. hover, focus등의 의사 class selector도 사용할 수 있음.
3. media query를 사용할 수 있어 반응형 디자인에 대응이 수월하다.

출처 : 우아한테크 - 👉🏻 동동의 CSS방법론(영상)