$$config title: BEM 명명 규칙 keywords: - IT - CSS $$ ## BEM이란 ? - 클래스 이름은 최대 3가지로 구성된다 - 블록(Block) : 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의 - 요소(Element) : 구성 요소 안쪽에는 하나 또는 그 이상의 요소가 있을 수 있다. - 변경자(Modifier) : 블록 또는 요소는 변경자를 이용해 변형을 표시할 수 있다. - BEM은 자주 사용하는 CSS 클래스 명명 규칙이다. - 단순하고 직관적이지만 처음 사용시 오류를 접할 수 있다. ### BEM 명명의 이점 - 목적 또는 기능을 전달해줌 - 구성 요소의 구조를 전달 - 선택자 특이성을 항상 낮은 수준으로 유지 ## BEM 예제 - 간단한 구성 요소는 단일 요소와 클래스를 사용하는 것만으로도 블록이 될 수 있다. ```html ``` - 변형이 있는 요소가 있을 때, 변형은 변경자 클래스로 구성 ```html ``` - 변경자 클래스만 사용하는 것은 안된다. 변경자 클래스는 대체가 아닌 확장을 위한 것이다. ```html ``` - 더 복잡한 구성 요소에는 하위 요소가 있다. 스타일에 맞는 필요한 각 하위 요소에는 명명된 클래스가 있어야 한다. ```html

``` - 구성 요소의 하위 요소를 나타내는 BEM 클래스 이름은 오직 기본 블록 이름과 하나의 요소 이름만 허용한다. ```html

``` - BEM 이름은 의도적으로 블록__요소--변경자를 분리하기 위해 단일 밑줄 대신 이중 밑줄과 이중 하이픈을 사용한다. ```html

// These class names are harder to read

```

게시글 상세