[공통개발] HTML, CSS(BEN Naming Convention), JavaScript Naming Convention (네이밍 컨벤션)

📝── HTML, CSS ──

• class name
  • kebab-case 또는 BEM방식
  • 예) nav-button
• id
  • camelCase 또는 kebab-case
  • 예) myUniqueId, my-unique-id 

 

class name의 경우 BEM Naming Convention을 사용한다고 한다

블록(B), 블록 내부 요소(E) 수정자인 스타일 변경(M) → button__icon--large

근데 BEM은 점점 늘어날 수록 헷갈려 보이기 때문에 개인적으로는 kebab-case가 더 나아보인다

 

📝── JavaScript ──

• Boolean
  • (is, has, can) + (형용사 or 명사) + CamelCase
  • 예) boolean isBroken, boolean hasBanana, boolean canFix

• 변수명
  • 명사 + CamelCase
  • 예) smartPhone
  • 자주 쓰이는 명사 → total (전체) count (개수)

• Enum
  • PascalCase
  • 예) Fruit
  • 예) enum Fruit {APPLE, ORANGE, BANANA, PEAR};

• 메소드명
  • (동사 or 전치사) + CamelCase  → 한 가지의 역할을 해야 한다
  • 예) getParts, toString
  • 자주쓰이는 동사 → get (가져오다) set (설정하다) find (찾다) init (데이터 초기화) create (생성하다) delete (삭제하다) update (갱신하다)

 

📝 주석 (HTML, CSS, JS 구분으로 사용)

/** ──── Fetch Data ──── */

/** ──── 상태관리 함수 ──── */

/** ──── 상태관리 ──── */

/** ──── PAGE ──── */