Modern CSS - CSS Modules

CSS Modules

CSS Modules란 모든 스타일에 동적으로 파일에 선언된 CSS 선택자에 고유한 해시 문자열을 추가하여 CSS 속성이 겹치지 않게 만드는 방식을 말한다. webpack에서 사용하는 css-loader가 필요한데, CRA로 개시한 프로젝트에서는 자동으로 세팅되어 있다.

CSS Modules 로고

 

React에서 CSS Modules 사용하기

CSS Modules를 사용하려면 스타일시트 파일명을 아래처럼 명명하면 된다.

컴포넌트이름.css 컴포넌트이름.scss 컴포넌트이름.sass

→

컴포넌트이름.module.css 컴포넌트이름.module.scss 컴포넌트이름.module.sass

 

/* test.module.css */
#button {
	color: red;
	font-size: 10px;
}

.main-container {
	margin: 20px;
}

// app.js
import styles from "./test.module.css"; // 컴포넌트 상단에서 import

function App() {
	return (
		<div id={styles["main-container"]}> // styles 객체 안에 있는 클래스 값들을 불러오기
			<button className={styles.button}>버튼</button>
		</div>
	);
}

export default App;

 

옵션

• : global → 전역 지정 스타일
• : local → 특정 컴포넌트에서의 사용을 지정하는 스타일

:global .red {
  color: crimson;
}
:local .local-color {
  color: red;
}

 

CSS Modules의 장점

• 레거시 프로젝트에 리액트를 도입할 때, 기존 프로젝트에 있는 CSS 클래스와 이름이 중복되어도 새로운 이름이 입혀지기 때문에 스타일이 꼬이지 않음.
• CSS 중복을 방지하기 위해 CSS 클래스 네이밍 규칙을 고민하지 않아도 된다.

 

CSS Modules의 단점

• 컴포넌트를 작성할 때 한 곳에서 모든 것을 작성하지 않고 따로 스타일시트 파일을 만들어야 하고, 그것들을 따로 관리해야 함.

 

공식 문서

https://github.com/css-modules/css-modules

GitHub - css-modules/css-modules: Documentation about css-modules