CSS in JS( ex. styled component )의 장단점

CSS-in-JS란?

CSS-in-JS는 스타일 정의를 css나 scss 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다. 대표적으로는 styled-components, emotion 등의 라이브러리가 있으며, 이것을 import하여 활용한다.

기존 웹사이트는 HTML, CSS, JavaScript를 각자 별도의 파일로 두었는데, React나 Vue, Angluar와 같은 모던 자바스크립트 라이브러리가 인기를 끌고 컴포넌트 기반 개발 방법이 주류가 됨에 따라 한 컴포넌트에 HTML, CSS, JavaScript를 모두 포함하는 패턴이 많이 사용되고 있는 추세다. 특히 이러한 부분 때문에 CSS-in-JS가 더욱 각광받고 있다.

 

기존 방식(css, scss 등)의 단점

몇 가지 문제점이 있는데, 그 중 대표적인 것들 2개만 작성하겠다.

1. 전역 관리
   • css 파일은 전역적으로 관리해야 한다. 다른 디렉토리에서 작업을 하더라도 해당 파일이 또 다른 디렉토리에 영향을 미칠 수 있다.
2. 유지보수
   • 1번과 연결되는 부분이다. 전역적으로 관리한다는 것은 모듈화가 미흡하다는 의미이기 때문에, 작업이 크고 고도화 될수록 유지 보수에 더 많은 시간과 비용을 발생시킨다.

그에 반해, CSS-in-JS 방식을 사용했을 때의 장점은 다음과 같다.

CSS-in-JS를 사용하면 무슨 장점이 있나요?

• 컴포넌트로 생각하기— 더이상 스타일시트의 묶음을 유지보수 할 필요가 없습니다. CSS-in-JS는 CSS 모델을 문서 레벨이 아니라 컴포넌트 레벨로 추상화합니다(모듈성).
• CSS-in-JS는 JavaScript 환경을 최대한 활용하여 CSS를 향상시킵니다. JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 할 수 있다. 예를 들어, React에서는 props를 활용한 조건부 스타일링이 가능하다.
• 진정한 분리 법칙—스코프가 있는 선택자로는 충분하지 않습니다. CSS에는 명시적으로 정의 하지 않은 경우, 부모 요소에서 자동으로 상속되는 속성이 있습니다. jss-isolate 플러그인 덕분에 JSS 규칙은 부모 요소의 속성을 상속하지 않습니다.(JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.)
• 스코프가 있는 선택자—CSS는 하나의 전역 네임스페이스만 있습니다. 복잡한 애플리케이션 내에서 선택자 충돌을 피할 수 없습니다. BEM과 같은 네이밍 컨벤션은 한 프로젝트 내에서는 도움이 되지만, 서드파티 코드를 통합할 때는 도움이 되지 않습니다. JSS는 JSON으로 표현된 것을 CSS로 컴파일 할 때, 기본적으로 고유한 이름을 생성합니다.
• 벤더 프리픽스—생성된 CSS 규칙은 자동적으로 벤더 프리픽스가 붙어있으므로 생각할 필요가 없습니다. ??
• 코드 공유—JavaScript와 CSS사이에 상수와 함수를 쉽게 공유할 수 있습니다.
• 현재 화면에 사용중인 스타일만 DOM에 있습니다(react-jss).
• 죽은 코드 제거 ??
• CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화의 장점이 있다.

html css : head에 link로 css를 다 불러온 다음에 html 태그 불러오고, 그 다음에 body 태그에 js script 태그로 불러옴 (초기에 시간 더 걸릴 수 있음)

css-in-js : 컴포넌트 실행 시 생성 + css 그러므로 스타일링이 안 입힌 상태로 나오기도, 시간이 더 걸리기도

CSS-in-JS의 단점

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

FOUC(Flash of unstyled content): 브라우저에 보여줄 것들이 많아짐에 따라, 점차적으로 속도가 느려집니다. 특히, 컴포넌트가 렌더링되며 형태가 잡히기 때문에 원형의 모습이 잠깐 노출되는 현상인 FOUC가 나타납니다.

이는 바꿔 말하면 기존 방식(css, scss 등)의 장점이라고도 할 수 있다. 그러나 이를 개선하기 위해 CSS-in-JS에서도 css를 SSR 방식으로 넣어주는 등 다양한 노력을 이어가고 있다.