작명규칙 (Naming Convention)

클래스를 효과적으로..

컨벤션은 조직마다 틀릴 수 있고, 정답이 없다.  다만 많은사람들이 사용하는 BEM이라는 방식이 있다.

CSS 방법론 중 BEM이란, Block Elements Modifier의 축약어

 

작명규칙(Naming Convention)

1. css선택자의 이름은 가능한 한 명확해야한다.

2. 소문자, 숫자만을 이용해야한다.

3. 여러단어의 조합은 하이픈(-)으로 연결한다.

 

블록(Block)

= 재사용 할 수있는 기능적으로 독립적인 페이지 구성 요소. HTML에서 블록은 class 속성으로 표시된다.

ex) header, menu, search-form

 

1. 형태(red, big)가 목적이아닌 목적(menu, button)에 맞게 결정해야한다.

2. 여백이나 위치를설정하면 안된다.

3.  태그, id선택자를 사용하면 안된다.

 

요소(Element)

= 블록안에서 특정 기능을 담당하는 부분

ex) menu__item, header__title

 

1. block__element 형태로 사용 (더블 언더바)

2. 형태가아닌 목적에 맞게 결정

 

수식어(Modifier)

= 블록이나 요소의 모양(color, size), 상태(disabled, checked)를 정의한다.

ex) block__element — modifier, block — modifier

 

1. block__element — modifier, block — modifier 형태로 사용(더블 하이픈)

 

 

참고사이트

https://css-tricks.com/bem-101/

BEM 101 | CSS-Tricks

https://bogmong.tistory.com/14

Naming Convention 네이밍 컨벤션이란. (HTML,CSS,JS)