본문 바로가기

프론트엔드/HTML, CSS, JS기본

HTML 클래스 속성의 작명법 - BEM

BEM(Block Element Modifier)

HTML 클래스 속성의 작명법입니다.

요소__일부분식으로 underscore(Low dash) 기호로 요소의 일부분을 표시합니다.

요소--상태식으로 Hyphen(Dash) 기호로 요소의 상태를 표시합니다.

 

BEM 예시

예시를 보시면

왼쪽에는 div자식요소들 중 name이 두 개가 존재합니다.

물론 보기에는 깔끔하고 간략하지만 css혹은 js파일에서 name클래스를 지정할 때 지정하기 힘듭니다.

 

왼쪽 btn 클래스 뒤에 따라오는 상태도 btn과 관련이 없어 보입니다.

오른쪽으로 수정한 후 한 눈에 확인할 수 있어서 편리합니다.

'프론트엔드 > HTML, CSS, JS기본' 카테고리의 다른 글

JS DOM API  (0) 2023.08.06
JS 함수, 조건문, 메소드 체이닝  (0) 2023.08.06
JS 변수, 예약어  (0) 2023.08.06
JS 데이터 종류(자료형)  (0) 2023.08.06
JavaScript 개요  (0) 2023.08.06