styled-components

CSS-in-JS 왜 만들어졌나?

CSS-in-JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말합니다. 2014년 페이스북 개발자인 Christopher Chedeau aka Vjeux가 처음 소개하였습니다.

Vjeux는 CSS를 작성하는 어려움을 다음과 같이 설명하였으며 CSS-in-JS로 이들 이슈를 모두 해결할 수 있다고 강조했습니다.

• Global namespace: 글로벌 공간에 선언된 이름의 명명 규칙 필요
• Implicit Dependencies: 의존 관계를 관리
• Dead Code Elimination: 미사용 코드 검출
• Non-deterministic Resolution
• Minification: 클래스 이름의 최소화
• Sharing Constants: JS와 CSS의 상태 공유
• Breaking Isolation: CSS의 외부 수정을 관리하기 어려운 문제

Emotion

• styled-components 와 비슷한 CSS-in-JS 라이브러리