네이밍 컨벤션 (Naming Convention)

🤔 네이밍 컨벤션이란?

하나 이상의 영어 단어로 구성된 식별자를 만들 때 단어를 한눈에 구분하기 위해서 규정한 명명 규칙이다. 대표적으로 카멜 케이스, 파스칼 케이스, 스네이크 케이스, 케밥 케이스, 헝가리안 케이스 등이 있다. 네이밍 컨벤션을 잘 지키면 가독성이 좋아지고 식별자의 역할도 명확하게 알 수 있다.

네이밍 컨벤션의 종류

🐪 카멜 케이스 (camelCase)

• 첫 번째 단어 제외하고 첫 글자를 대문자로 표기
• 주로 함수나 변수에 사용

📐 파스칼 케이스 (PascalCase)

• 모든 단어의 첫 글자를 대문자로 표기
• 주로 클래스 이름으로 사용

🐍 스네이크 케이스 (snake_case)

• 모두 소문자로 표기하고 단어 사이에 언더스코어(_)를 작성
• DB에서 주로 사용
• 변수명, 함수명, 데이터 타입 등으로 사용

ㄴ 😱 스크림 스네이크 케이스 (SCREAM_SNAKE_CASE)

• 모두 대문자로 표기하고 단어 사이에 언더스코어(_)를 작성
  -상수를 표현할 떄 사용

🌯 케밥 케이스 (kebab-case)

• 모두 소문자로 표기하고 단어 사이에 대시(-)를 작성
• url, html, css 등에서 많이 사용

🐉 헝가리안 케이스 (typeHungarianCase)

• 접두어에 자료형을 알아볼수 있게끔 표기
• 마이크로소프트 개발자 중 헝가리 프로그래머가 쓰던 변수 명명법
• 현재는 자료형을 쉽게 알아 볼수 있는 다양한 방법들이 많기 때문에 권장하지 않음

CSS BEM

BEM(Block-Element-Modifier)은 CSS 클래스 이름을 위해 규정한 명명 규칙이다. BEM 목적 또는 기능, 그리고 구성 요소의 구조를 전달해주는 작성법이다. Block, Element, Modifier를 각각 __와 --로 구분한다.

.form {}
.form__button {}
.form__button--disabled {}

블록(Block): 재사용 가능한 기능적으로 독립적인 페이지 컴포넌트. 구성 요소의 가장 바깥쪽 상위 요소를 블록으로 정의.
요소(Element): 블럭을 구성하는 단위. 블록과 달리 독립적이지 않고 자신이 속한 블럭 내에서만 의미를 가지기 때문에 의존적인 형태.
변경자(Modifier): 블럭이나 엘리먼트의 속성. 블록 또는 요소는 변경자를 이용하여 변형을 표시할 수 있음.