CSS Module은 편리하다. 모듈 내에서 만들어진 CSS태그를 적용하면 컴파일 과정에서 자동으로 랜덤한 클래스네임으로 바꿔준다. 때문에 여러 컴포넌트나 모듈에서 같은 클래스네임을 사용하더라도 겹치지 않는다.
CSS Module과 Styled JSX를 알았을 때, 처음에는 CSS Module에 마음이 끌렸다. 일단 html 안에 <style>을 넣는 Styled JSX의 방식이 별로 마음에 안 들었다. 파일을 따로 분리해 놓는 게 왠지 모르게 편안해 보였다. 그런데 CSS Module과 Styled JSX를 비교하는 글을 쓰다 보니, CSS Module의 장점이 거의 없더라.
CSS Module은 로딩이 빨라 인터랙티브한 웹에 사용하기 좋지만, 그 외에는 Styled JSX의 하위호환이라고 느껴지는 부분이 많다.
Styled JSX에서는 body, h1 등 클래스네임이 아닌 것도 사용할 수 있다. 굳이 버튼에 .link 클래스를 붙이지 않아도, a{} 하나만 쓰면 멀쩡히 적용된다. 반면 CSS Module은 클래스네임을 사용해야만 한다.
편리하고 직관적인 스코프
// _app.js
<NavBar />
<Component {...pageProps} />
<span>Hello</span>
<style jsx>{`
body {
color: tomato;
font-size: 100px;
}
`}</style>이렇게 썼다면, body 태그를 선택했음에도 폰트 색과 크기 변경은<span>Hello</span> 에만 적용된다. <NavBar />, <Component {...pageProps} /> 등 외부 컴포넌트는 적용되지 않는다.
만약 외부 컴포넌트들에도 모두 적용하고 싶다면 <style jsx global> 로 살짝만 수정해주면 된다.
-업데이트 예정
mindle