https://fe-developers.kakaoent.com/2022/220210-css-in-kakaowebtoon

CSS-in-JS

지금처럼 웹이 복잡하지 않던 과거에는, 프론트엔드 영역이 나뉘어 있지 않았다.

서버에서 모든 페이지를 서빙하고, 약간의 JS로 동적 웹을 구현하는 수준이었다.

현대의 프론트엔드는 앱을 만드는 것만큼 복잡해졌다.

JS, CSS 사용 빈도가 급증했고 그에 따라서 성능과 효율을 위한 다양한 프레임워크가 등장하게 되었다.

CSS-in-JS는 2014년에 페이스북 개발자가 공개했다.

기존 CSS 작성의 문제점

• 전역 네임스페이스
  • 모든 스타일을 전역으로 선언하기 때문에, 별도의 class 명명 규칙을 적용해야함.
  • 이거 때문에 BEM, OOCSS, SMACSS 같은 방법론 등장
• 의존성
  • 하나의 Element에 여러 css가 적용되기 때문에, 모든 스타일을 개발자가 기억해야함
• Dead Code
  • CSS, JS가 분리되어 관리되기 때문에, 기능 변경에 따른 동기화 문제가 발생한다.
• Minification
  • 중복 제거를 위해 긴 클래스 이름을 사용하고, 문서 사이즈가 커진다.
• Sharing Constant
  • css가 분리되어 있어서 js의 상태값을 공유하기 어렵다.
• Non-deterministic Resolution
  • css 로드 순서에 따라서 우선순위가 달라지기 떄문에 css 로드 순서를 기억해야한다.
• Isolation
  • css는 부모로부터 스타일을 상속하므로 하위 컴포넌트가 영향을 받는다.