CONTENTS
CSS-in-JS 개발 방법론
1. 정의
2. 문제점 공식화
3. Inline Style ≠ CSS-in-JS
3. 장점과 단점
Emotion
1. 장점
2. Styled Component
vs
Emotion
3. Emotion from glam
CSS-in-JS 개발 방법론
1. 정의
What is CSS-in-JS?
CSS-in-JS 개발 방법론이란?
단어 그대로 자바스크립트 기반 개발 방법론을 뜻한다.
1. Global namespace
2. Dependencies
3. Dead Code Elimination
4. Minification
5. Sharing Constants
6. Non-deterministic
Resolution
7. Isolation
문제점 7가지
CSS-in-JS 개발 방법론
2. 문제점 공론화
CSS-in-JS 개발 방법론
3. Inline Style ≠ Css-in-JS
CSS-in-JS 개발 방법론
3. Inline Style ≠ Css-in-JS
1 브라우저 DOM Node에 인라인(문자열)로 첨부
2 @media, @keyframes 등의 경우 브라우저가 인식하지
못하기 때문에 사용 할 수 없음
Inline Style
<div style={{backgroundColor: 'white'}} />
<div style="background-color: white;" />1 작성한 스타일을 <style> 태그에 CSS 첨부
2 CSS의 모든 기능을 손쉽게 사용 가능
CSS-in-JS
<style>.css-back-color { background-color: 'white'; }</style>CSS-in-JS 개발 방법론
4. 장점과 단점
1. 컴포넌트 CSS
2. Class Name
3. JS 상수 공유 가능
1. 러닝 커브
2. 런타임 비용
3. in Framework
Emotion
1. 장점
1. 프레임 워크에 구애 받지 않는다.
2. 설계 및 컴포넌트 기반 아키텍쳐 보장(확장성)
3. Next.js 자동 코드 스플리팅 지원
4. Hash ClassName
장점 4가지
Emotion
2. Styled Components vs Emotion
Emotion WIN!
DOM과 독립적인
기능 제공
SSR by Default
Emotion
3. Emotion from glam
Emotion
3. Emotion from glam
From 1
From 2
Emotion
3. Emotion from glam