BEM 방식

BEM

: Block, Element, Modifier 를 뜻하며, 각각 '--', '__' 로 구분한다.

 

-Block(전체를 감싸고 있는 블럭요소)

: 재사용이 가능한 기능적으로 독립적인 페이지 컴포넌트를 블럭이라고 한다.

 

-Element(블록이 포함하고 있는 한 조각)

: 블록을 구성하는 단위, 블록은 독립적인 형태이지만 엘리먼트는 의존적인 형태이다.

자신이 속한 블록 내에서만 의미를 가지기 때문에 블록 밖에서 사용할수없다.

 

-Modifier(블록 또는 요소의 속성, 속성이란 블록 또는 요소의 외관이나 상태를 변화가능한 부분)

: 블럭이나 엘리먼트의 속성을 담당한다. 

 

-클래스명은 구체적이고, 명료하며 HTML 안에서도 읽기 쉬워야한다.

-클래스명이 무엇을 나타내는지 분명하게 전달되어야한다.

-클래스명은 각 HTML 태그에 오직 클래스명을 하나만 사용해야 한다.

-클래스만을 활용하여 구조화 하는 방법이다.

-반복되는 클래스를 만들거나 똑같은 스타일을 반복해서는 안된다.