css module이 무엇이고 사용이유는?

스타일 컴포넌트 선택 이유

컨벤션 작성에 앞서 ~에서 ~ 대신 Css Module을 선택한 이유는 여러 가지 이점 때문입니다.

1. 전역 스타일의 영향 없이 CSS 클래스의 로컬 스코프를 유지
2. Styled-component와 같은 별도의 학습이 필요X
3. 컴포넌트 내부에서 클래스 이름을 자동으로 고유화하여 충돌을 방지
4. 추가 라이브러리 설치할 필요가 없음
5. 정적 Css 파일을 사용해 JS 런타임에서 파싱하는 오버헤드를 피할 수 있어 JS 번들 크기를 줄임

~의 고유한 장점도 있지만, Css Module과 기존 Css 문법이 유사하기 때문에 추가 학습이 필요없고, 추가 학습에 대한 부담이 줄어들어 난이도가 올라간 중급 프로젝트 진행시 부담을 줄일 수 있을 것이라는 이점이 있어 선택하게 되었습니다.

파일 및 폴더 구조

1. 각 컴포넌트 스타일은 별도의 ComponentName.styles.js 파일에 관리됩니다.
2. 스타일과 컴포넌트를 함께 배치해 명확하게 구분합니다.

네이밍 규칙

KebabCase를 사용해 컴포넌트 역할을 명확히 나타냅니다.

1. 레이아웃 요소 → 이 중 무엇을 사용할지 정하면 좋겠네요.
   1. 전체 레이아웃을 감싸는 요소는 ?-container사용
   2. 특정 영역을 감싸는 요소는 ?-section 사용
   3. 행, 열을 나타낼 때는 ?-row, ?-col 사용
2. 부모/자식 계층을 반영한 네이밍 패턴을 따릅니다. 예: header-container → header-title.