CSS in JS

CSS in JS : 자바스크립트 코드에서 CSS를 작성하는 방식

- ‘스타일을 얼마나 동적으로 작성할 수 있는가’ 가 핵심

- JavaSript 환경을 최대한 활용
- JavaScript와 CSS 사이의 상수와 함수를 쉽게 공유 
- 현재 사용중인 스타일만 DOM에 포함
- CSS-in-JS는 짧은 길이의 유니크한 클래스를 자동으로 생성하기 때문에 코드 경량화


 
기존 CSS의 문제점
- Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
- Dependencies: CSS간의 의존 관계를 관리
- Dead Code Elimination: 미사용 코드 검출
- Minification: 클래스 이름의 최소화
- Sharing Constants: JS와 CSS의 상태 공유
- Non-deterministic Resolution: CSS 로드 우선 순위 이슈
- Isolation: CSS와 JS의 상속에 따른 격리 필요 이슈

 

 

개념이 발전하면서 많은 라이브러리가 등장
- styled components
- emotion ..

 

 

 

출처

 

https://www.samsungsds.com/kr/insights/web_component.html

웹 컴포넌트 스타일링 관리 CSS-in-JS vs CSS-in-CSS