디렉토리 & 파일명

케밥 케이스(kebab-case) ex) item-category

컴포넌트

파스칼 케이스(PascalCase) ex) ItemComponent

변수명

카멜 케이스(camelCase) ex) itemData

커스텀훅

use + 파스칼 케이스(PascalCase) ex) useItemData.tsx

이미지 & 아이콘

img, ic + 스네이크 케이스(snake_case) ex) img_item.svg ic_item.svg

className

케밥 케이스(kebab-case) ex) button button-primary

id

파스칼 케이스(PascalCase) ex) Button ButtonPrimary

BEM(Block Element Modifier) 패턴

BEM 패턴으로 구조적이고 일관된 class 네이밍 구현

/* Item.module.css - 공식 BEM 표준 */
.item {}
.item__header {}
.item__content {}
.item__header--highlighted {}

/* Item.module.css - '-'만 사용한 간단한 표기법 */
.item {}
.item-header {}
.item-content {}
.item-header-highlighted {}

표준이 아닌 **-**만 사용한 간단한 표기법도 컨벤션을 정리하고 문서화하면 큰 문제가 없어 보입니다.