[CSS] CSS in JS 의 장단점

CSS in  JS 는 스타일을 css 파일 대신 자바스크립트 파일로 하는 것으로, 대표적으로 Styled-Component 가 있다.

 

CSS-in-JS의 장점

• CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다. CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화한다 (모듈성)
• CSS-in-JS는 JavaSript 환경을 최대한 활용 할 수 있다
• JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다
• 현재 사용중인 스타일만 DOM에 포함한다.
• CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다

CSS-in-JS의 단점

• 러닝 커브
• 새로운 의존성
• 별도의 라이브러리를 설치해야 하므로 번들 크기가 커진다
• 인터랙션한 페이지일 경우 CSS 파일을 따로 관리하는 방법에 비해 느린 성능을 보여줄 수 있다.