css-in-js와 css-in-css 생각정리

https://dev.to/alexsergey/css-modules-vs-css-in-js-who-wins-3n25

css-in-js와 css-in-css 생각정리

그동안 css-in-js랑 css-in-css 에 대해 파편화되어 있던 개념들을 정리해보았다.

css-in-js

css-in-js를 사용하여 스타일을 처리할 때, 스타일 생성 및 동적 스타일 적용과 관련된 런타임 오버헤드가 있을 수 있다.

 

많은 아티클들에서 css-in-js와 css-in-css를 비교했다고 하면서 같은 사진을 돌려쓰고 있는데, 어떻게든 렌더링 속도를 빠르게 할 수 있다면 좋은 것이다.

 

다만 css-in-js를 꼭 나쁘게 볼 필요는 없는 것 같다. 런타임 오버헤드가 그리 크지 않다면 사용해도 나쁠게 없다고 본다.

개발하기 편하니깐.

다만 인터렉션이 많다면 css-in-css를 고려하는것이 좋을 듯

css-in-css

브라우저에서 바로 cssom으로 변환함. 추가 런타임 오버헤드 안생김

scss(sass)

scss의 경우 전처리기를 css로 변환하는 작업이 컴파일단계에서 일어나기 때문에 유저 경험과는 무관하다.

---

https://junghan92.medium.com/%EB%B2%88%EC%97%AD-%EC%9A%B0%EB%A6%AC%EA%B0%80-css-in-js%EC%99%80-%ED%97%A4%EC%96%B4%EC%A7%80%EB%8A%94-%EC%9D%B4%EC%9C%A0-a2e726d6ace6

(번역) 우리가 CSS-in-JS와 헤어지는 이유

https://dev.to/alexsergey/css-modules-vs-css-in-js-who-wins-3n25

CSS Modules vs CSS-in-JS. Who wins?