CSS

CSS : CSS 모듈화

죽이죽이 2024. 2. 14. 13:14

CSS 모듈

※ 사용하는 이유
- 이름 충돌 방지 : CSS 모듈은 클래스 이름을 지역적으로 유지하므로 다른 모듈이나 전역 스타일과 충돌하지 않는다. (각 모듈이 독립적으로 작동)
- 재사용성과 유지 보수성 향상 : 컴포넌트별로 스타일을 모듈화함으로써, 코드의 재사용성과 유지 보수성을 향상시키며, 특정 컴포넌트에 대한 스타일 변경이 해당 컴포넌트만 영향을 미치게 된다.

- 가독성 향상: 클래스 이름에 대한 명명 규칙이 모듈 내에서만 적용되므로 다른 부분의 클래스 이름과 구분이 쉽기때문에 가독성이 향상된다.

※ 사용 방법
- css 파일 생성 : 컴포넌트명.module.css


- 컴포넌트에서 import


- 클래스명 지정 : styles.클래스명