공통

• BEM 규칙 사용
• Block, Element, Modifer 의 줄임말
  1. 블록(Block): 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의한다.
  2. 요소(Element): 구성 요소 안쪽에는 하나 또는 그 이상의 요소가 있을 수 있다.
  3. 변경자(Modifier): 블록 또는 요소는 변경자를 이용하여 변형을 표시할 수 있다.

<aside> 💡 .block__element--modifier 과 같은 형태로 쓸 수 있습니다.

</aside>

• 예시

<!-- DO THIS / 역자 주 / btn 구성 요소에 --submit 변경자를 추가해서 확장했다 --><button class="btn btn--submit"></button>

<style>
.btn {
display: inline-block;
color: blue;
  }
.btn--submit {
color: green;
  }
</style>

<!-- DON'T DO THIS / 이렇게 하지 마세요 --><button class="btn--secondary"></button>

<style>
.btn--secondary {
display: inline-block;
color: green;
  }
</style>

• 시작이름은 영문 대문자, 숫자, 특수문자로 시작할 수 없다.(파일 및 폴더 제외)
• 네이밍 규칙의 언더스코어(_) 조합은 파일, 폴더, 이미지에 사용한다.
• 네이밍 규칙의 하이픈(-) 조합은CSS 네이밍에 사용하는 것을 권장한다. HTML 문서 안에서 언더스코어(_)의 조합은 form, input 엘리먼트등의 name 어트리뷰트의 값을 사용하는 것을 권장한다. 이유는 클래스 네임이 서버사이드 스크립트의 변수와 자바스크립트의 변수 정의시 혼돈을 방지하기 위함이다.
• 1, 2과 같은 한자리 정수는 사용하지 않으며 01, 02과 같이 사용하며 사용을 권장한다. 대부분의 파일관리 유틸리티 프로그램들을 사용하여 파일의 이름으로 정렬할 때에 정렬의 순서를 보장하기 위함이다.

아이디 Naming

시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대분자로 처리하는 기법(카멜 케이스)를 사용한다.

• 동일한 이름의 id는 문서에서 한번만 사용
• 지정된 레이아웃을 제외한 스타일 지정을 위하여 id를 사용하지 않는다.
• 앵커로서 사용되는 엘리먼트는 id지정이 가능하다.
• User Interface 동작을 위하여 DOM 선택자로서의 id 지정은 가능하다.