web/css-in-js-whats-the-defference/

[utterances-bot]

trafficstars

CSS-in-JS, 무엇이 다른가요? | SOSOLOG

Table of Contents CSS in JS? Critical CSS와 CSS-in-JS Performance Atomic CSS 마무리 References CSS in JS? CSS-in-JS는 단어 그대로 JavaScript코드에서 CSS를 작성하는 방식을 말합니다. 2014년 Facebook 개발자인 Christopher Chedeau aka Vjeux 의 발표에서 소개되었으며, 기존 CSS관리의 어려움을 해결한 Facebook…

https://so-so.dev/web/css-in-js-whats-the-defference/

[flex-junwoo]

좋은 글 잘 읽었습니다~!

[flex-hunmin]

CSS in JS의 창시자가 여기에 있다고 해서 왔습니다.

[hg-pyun]

좋은 글 감사합니다. 배워갑니다 :)

[adhrinae]

잘 읽었습니다 👍

[leesnhyun]

좋은글 감사합니다! 🙂

[samslow]

글 정말 잘 읽었습니다. css 의 세대별 정리가 인상깊었던 것 같아요.

스타일을 제어할 수 있는 형태였지만, inline style을 사용하므로 :before , :nth-child 등의 pseudo selector를 사용할 수 없는 등 CSS의 모든 spec을 사용할 수 없습니다ㅏ.

요기 맨 마지막에 ㅏ 가 더 들어간것 같습니닷

[eunsukimme]

좋은 글 잘 읽었습니다. CSS-in-JS 가 발전해온 과정, runtime vs zero-runtime 특성에 대해 이해하는데 많은 도움이 되었습니다. 👍

[alkaba]

좋은 글 감사드립니다! 너무 잘 읽었습니다!

[jbee37142]

정말 좋은 글 감사합니다! 어렴풋이 알고 있던 css in js에 대해 좀 더 깊게 이해할 수 있었습니다. 👍

[ipadorusa]

좋은글 감사합니다 ^^ 잘 읽었습니다.

[jeemyeong]

잘 읽었습니다 감사합니다.

[iicdii]

자세한 분석이네요 좋은 글 감사합니다!~ zero runtime css-in-js의 tradeoff에 대한 내용을 보충하면

장점: CSS 파일을 정적으로 추출하기 때문에 독립적으로 캐시가 가능하고, 자바스크립트 번들 용량이 줄어들며 JS로부터 독립적으로 CSS가 파싱된다.

단점: 다이나믹 스타일링에 제한이 있고, IE 지원이 안되며, CSS 파일을 불러오기 위해 추가적인 네트워크 요청이 필요하다. 그리고 SSR을 할 때 크리티컬 CSS extraction이 불가능하므로 불필요한 코드들이 다운로드 될 여지가 있다.

With static CSS extraction, the CSS is independently cachable1, your JavaScript bundle is slimmer and the CSS is parsed independently from the JavaScript.

The downsides are that it heavily limits dynamic styling, there is no IE support for dynamic styling, users have to do an extra network request to load the CSS, and it cannot do critical CSS extraction during server-side rendering, leading to (potentially lots of) unnecessary code being downloaded.

styled-component 기여자 분이 작성하신 댓글에서 가져왔습니다.

[taeyoungs]

좋은 글 잘 읽었습니다. 감사합니다!