CSS in JS

키워드

CSS in JS
CSS

CSS in JS

React: CSS in JS (2014)

참고 레퍼런스:

• https://developer.mozilla.org/ko/docs/Web/CSS/Reference

• flexbox

• Grid

CSS in JS

컴포넌트 중심으로 사고할 수 있다.

1. Global Namespace

2. Dependencies

3. Dead Code Elimination

4. Minification

5. Sharing Constants

6. Non-deterministic Resolution

7. Isolation

A Unified Styling Language (2017)

1. Scoped styles

2. Critical CSS

3. Smarter optimisations

4. Package management

5. Non-browser styling

All You Need To Know About CSS-in-JS (2017)

1. Thinking in components

2. CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS.

3. True rules isolation

4. Scoped selectors

5. Vendor Prefixing

6. Code sharing

7. Only the styles which are currently in use on your screen are also in the DOM (react-jss).

8. Dead code elimination

9. Unit tests for CSS

Most popular CSS-in-JS libraries

→ 2023년 1월 기준으로 styled-components, JSS, Emotion 순서.

성능 이슈

CSS-in-JS와 성능 (2021)

→ CSS 파일과 JS 파일 로딩의 차이.

Why We're Breaking Up with CSS-in-JS (2022)

대안:

• Linaria

  • CSS를 평범한 텍스트로 작성.

  • React에 종속적이지 않지만, React Styled Component도 지원함.

• vanilla-extract

  • CSS를 오브젝트 형태로 표현. React의 Inline Style과 유사함.

  • React와 무관하게 사용 가능.

CSS(Cascading Style Sheets)

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드