CSS in JS가 좋은가, 아니면 고전적으로 사용되던 방식인 css를 로드하는 것에 대해 생각을 해봤습니다.

고전적인 방식을 선택한다면 크게 pages, component, global 3가지의 css를 불러오게 될텐데
만일 클래스 네임을 중복해서 적었다면, 혹은 로드하는 css 파일 순서가 변경됬다면 그거에 대한 우선순위가 바껴 사이드이펙트가 발생할테고
이슈를 처리하는데 들어가는 시간, 클래스네임을 하나하나 짓는데에서 들어가는 리소스가 많이 발생할 것 같아서 제외했습니다.
또한 번들크기 자체도 관리하는게 어렵다고 생각이 들었습니다.

그러면 tailwindcss 같은 유틸리티 도구를 사용하면 되지 않을까요? 라는 대답에는
사전에 정의된 css 파일을 사용하는거 자체가 개발공부 목적에 취지가 맞지 않는다고 생각이 가장 크고,
어떤 클래스를 사용해서 얼마만큼의 값을 적어야 되는지 등 외워야 될 게 많습니다
그리고 그 기술을 공부한다고 해서 몇년 뒤에도 그 기술이 쓰일 수 있을지에 대한 생각을 해보고나서 사용하지 않기로 했습니다.

그래서 css module, styled-component 그리고 리나리아를 고려하던 도중
css module 방식은 global css와 혼합해서 사용하기 너무 까다로운 조건이 있고,
styled component는 dev-tools에서 디버깅하기 힘들게 한번 씩 컴포넌트를 싼다는 이슈와 (현재는 그렇지 않습니다만 ..)
처음 로드될 때 사전에 블로킹되는 비용을 보고나서 배제했습니다.
Real-world CSS vs. CSS-in-JS performance comparison

그래서 마지막으로 리나리아를 선택하게 되었는데, 한번도 사용해본 적이 없어 개발 도중 이슈 대응에 시간적 요소가 많이 들어갈 것 같지만
위에서 필요하다고 말한 장점, 혹은 그에 대한 단점 전부 절충될 수 있다고 판단이 서기 때문에 리나리아를 선택하게 됬습니다.