CSS-in CSS

Creator

Creator

Seonglae Cho

Created

Created

2021 Apr 22 5:3

Editor

Editor

Seonglae Cho

Edited

Edited

2024 Jan 10 2:22

Refs

Refs

CSS Module 이 대표격 - @import css (병렬 다운 안되서 성능에 안좋다)

성능 좋음

Limitations of Scoped CSS | Zell Liew

I was really excited about Scoped CSS a couple of years back when frameworks like React and Vue introduced them. As I began trying Scoped CSS out for myself, I was disappointed and I felt it didn't live up to its hype. But after more tries, I'm happy to announce that Scoped CSS is indeed useful. You only have to realize what its limitations are and what to do when you face these limitations.

Limitations of Scoped CSS | Zell Liew

https://zellwk.com/blog/limitations-of-scoped-css

[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리

이 파트의 핵심은 파싱의 병렬성과 렌더링에 미치는 영향이다. 크게 배치순서를 바꾸는 것과 제한, 기타 효율적 활용하는 방안으로 나눌 수 있다. 2.1.1 CSS를 상단에 배치 개요 분류: CSS HEAD에 스타일 시트를 넣으면 페이지가 점진적으로 렌더링 될 수 있어 좋다. CSSOM 트리는 CSS를 모두 해석해야 구성되고, 구성되지 않으면 렌더링이 차단되기 때문이다.

[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리

https://black7375.tistory.com/74

[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리

CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교

지난번 포스팅(CSS-in-JS에서 CSS-in-CSS로 바꿔야 하는 이유) 에는 CSS-in-JS에서 CSS-in-CSS 방식으로 변경해야 하는 이유에 대해 설명했다. 요약해보면, 다음과 같다. 성능에 초점을 맞춘다면 CSS-in-CSS, 개발 생산성에 초점을 맞춘다면 CSS-in-JS 를 사용하는 편이 낫다. 어떤 방식이 더 낫다고 단정할 수는 없으며, 서비스의 용도와 목적에 따라 적절한 선택이 필요하다.

CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교

https://blueshw.github.io/2020/09/27/css-in-js-vs-css-modules/

CSS-in-JS(Styled Components) vs CSS-inCSS(CSS Modules) 성능 비교

Recommendations

/////////