[CSS] CSS-in-JS 의 장단점

css-in-js는 styled-component처럼 js파일안에 css코드를 작성하여서 적용하는 방식인데 대표적인 라이브러리로는

styled-component와 emotion이 있습니다 이에 대한 장단점에 대해 알아보겠습니다

 

장점

▪️ 지역 스코프 스타일 : CSS로 스타일링 할 경우 전역 스코프 스타일에 영향을 미치기 때문에 클래스 이름이 중복되는 일이 없도록 신경써야하고, 어떤 CSS파일에서 스타일링 적용된 것인지 찾는 것도 어려울 수 있습니다. CSS-in-JS는 기본적으로 스타일을 지역 스코프로 지정하여 이 문제를 완전히 해결합니다.

▪️ 자바스크립트 변수를 style에 사용 : 스타일 규칙을 작성할 때 스크립트 변수를 참조할 수 있습니다. 동일한 상수를 CSS 변수와 자바스크립트 상수로 나눠 정의할 필요가 없기 때문에, 때에 따라 스타일에서 중복을 줄일 수 있습니다.

 

단점

▪️ CSS-in-JS는 런타임 오버헤드를 더합니다 : 컴포넌트를 렌더링 할 때 CSS-in-JS 라이브러리는 `document`에 삽입할 수 있는 일반 CSS로 스타일 데이터를 변환해야 합니다. 이 과정에서 추가 CPU를 차지하고, 컴포넌트의 복잡도에 따라 성능에 영향을 줍니다.

▪️ CSS-in-JS는 번들 크기를 늘립니다 : 사용자는 CSS-in-JS 라이브러리를 다운로드 해야 합니다. 용량이 엄청 크진 않지만, 라이브러리에 따라서 8~13kB 정도의 용량이 추가됩니다.

▪️ CSS-in-JS를 사용하면 특히 SSR 또는 컴포넌트 라이브러리를 사용할 때 오류가능성이 커집니다.

 

그외에도 css module처럼 모듈화하여 컴포넌트마다 고유하게 적용하는 방법도 있고

tailwindCSS처럼 Utility first방식으로 작성하여서 직관적인 css도 적용할 수 있습니다

각 장단점이 있지만 팀에 스타일에 맞는 방식을 선택해서 쓰는것이 옳습니다

 

참고 자료

https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6