스킨 제작: CSS 이름규칙

단어 사이는 하이픈(-)으로

프로그래밍에 익숙한 경우 카멜 표기법(camelCase)이 파스칼 표기법(PascalCase)을 사용하는데 익숙해져 있습니다. 하지만 CSS를 다루는 경우에는 스네이크 표기법(snake_case)과 유사하지만 밑줄 대신 하이픈을 사용하는 방식을 많이 사용합니다.

• (X) topbarTitleText
• (O) topbar-title-text

BEM 방법

BEM 방법은 블록(Block), 요소(Element), 변경(Modifier)을 기준으로 나누어 선택자의 이름을 정하는 것입니다. 각각은 이중 밑줄(__)으로 구분합니다.

블록은 어디에 사용하는지를 나타내고, 요소는 대상의 종류를 나타냅니다. 가령, 네비게이션 바의 카테고리가 가지는 선택자 명칭은

• nav__category

가 됩니다. 변경은 요소의 스타일이 조건에 따라 바뀌는 경우를 말합니다. 가령, 네비게이션의 메뉴 버튼이 특별한 경우 비활성화 된다고 한다면

• nav__menu-btn
• nav__menu-btn__disabled

로 활성화 되어있는 메뉴 버튼과 비황성화 되어있는 메뉴 버튼의 스타일을 구분할 수 있습니다.

js_ 접두어 사용

자바스크립트에서 요소를 선택하고자 할 때 document.querySelector()를 자주 사용하게 됩니다. 그러나 이 방식을 사용하는 경우 요소의 식별자 변경으로 인해 자바스크립트가 작동하지 않거나 오작동을 하게될 수 있습니다.

해결을 위해서 자바스크립트를 위한 접두어를 따로 만드는 방법이 있습니다. 추천하는 방법은 기능이나 요소 앞에 js_를 붙이는 것입니다.

• js_slide-left
• js_menu-open
• js_nav__menu-btn