Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
linaria: Zero-Runtime CSS in JS
森建
July 31, 2020
Programming
2
1.2k
linaria: Zero-Runtime CSS in JS
社内エンジニア勉強会
森建
July 31, 2020
Tweet
Share
More Decks by 森建
See All by 森建
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
1.5k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
430
Multithreading WebAssembly by Rust
petamoriken
2
560
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by Pure Rust
petamoriken
0
540
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
petamoriken
2
510
バイト列から整数を得る
petamoriken
1
250
WebAssembly by Rust
petamoriken
0
860
Cloud FunctionsでOpen Graph Protocolの画像を自動生成する
petamoriken
0
620
Other Decks in Programming
See All in Programming
mrubyを1300円のボードで動かそう
yuuu
0
190
未経験QAの私が、よきQA(Question Asker) になっていく物語
atamaplus
0
380
Unity Localization で多言語対応実装しよう / xrdnk-yokohamaunity-lt10-20220513
xrdnk
0
180
モバイルファーストデザインの爆速実装を考える
tanabee8
0
160
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
3
650
Nix for Scala folks
kubukoz
0
140
NieR Re[in]carnationにおけるUnityアニメーション活用術
applibot
1
940
職場にPythonistaを増やす方法
soogie
0
330
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
160
カラーミーショップは私たちが作っています
kenchan
0
120
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
160
Let's build components, not layers
thombergs
1
190
Featured
See All Featured
Three Pipe Problems
jasonvnalue
89
8.6k
Rails Girls Zürich Keynote
gr2m
86
12k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
The Language of Interfaces
destraynor
148
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
900
Debugging Ruby Performance
tmm1
65
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
498
130k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
268
11k
Designing for Performance
lara
596
63k
A Modern Web Designer's Workflow
chriscoyier
689
180k
How New CSS Is Changing Everything About Graphic Design on the Web
jensimmons
212
11k
Visualization
eitanlees
124
11k
Transcript
linaria Zero-Runtime CSS in JS pixiv Inc. petamoriken 2020.7.31
2 自己紹介まわり • 主にフロントエンドエンジニア • ECMAScript や WHATWG DOM を追うのが好き
• iOSDC Japan 2020 のサイト制作を担当しました petamoriken 課題解決部
3 HTML(JSX) と CSS の連携 • HTML(JSX) と CSS ファイルが分かれたタイプ
◦ BEM によるクラス管理 ◦ CSS Modules • CSS in JS ◦ styled-components / emotion ◦ jss
4 HTML(JSX) と CSS の連携 • HTML(JSX) と CSS ファイルが分かれたタイプ
◦ BEM によるクラス管理 ◦ CSS Modules • CSS in JS ◦ styled-components / emotion ◦ jss
const StyledButton = styled.button` color: blue; width: ${(props) => props.width}px;
`; <StyledButton width={50} /> styled-components / emotion 5 JSX HTML (レンダリング後) <button style="color: blue; width: 50px;">
6 styled-components / emotion について • 利点 ◦ CSS との連携を考えなくて良くなる
• 問題点 ◦ JS のランタイムで実行されるためパフォーマンスに問題がある スタイル付けされたCSS-in-JS実装は、スタイル付けされていないバージョンと比べ て50%以上もレンダリングに時間がかかるように見えた。 https://www.infoq.com/jp/news/2020/01/css-cssinjs-performance-cost/ ◦ ランタイムに stylis.js を使っていてカスタマイズしづらい
7
const StyledButton = styled.button` color: blue; width: ${(props) => props.width}px;
`; <StyledButton width={50} /> linaria 8 JSX .abcd1234 { color: blue; width: var(--abcd1234-0); } CSS <button class="abcd1234" style="--abcd1234-0: 50px;"> HTML (レンダリング後)
9 linaria について • 利点 ◦ パフォーマンスの問題を解決 ◦ コンパイル時に PostCSS
によるカスタマイズが可能 • 問題点 ◦ IE 11 非対応 ◦ ランタイムで styled-components / emotion ほどの柔軟性はない css prop が使えない / CSS プロパティの出し分けが出来ない
const StyledButton = styled.button` border-radius: 3px; ${(props) => props.large ?
css` padding: 0.5em 2em; font-size: 2em; ` : css` padding: 0.25em 1em; font-size: 1em; `} `; styled-components / emotion 10
const StyledButton = styled.button` border-radius: 3px; padding: 0.25em 1em; font-size:
1em; &[data-large] { padding: 0.5em 2em; font-size: 2em; } `; linaria 11
12 linaria を使ってみた所感 • styled-components / emotion とほとんど同じ書き方が可能 ◦ コンパイル時に
CSS が静的解析できないといけないことに注意 ◦ 書いていて特に困ることはなかった • まだまだ発展途上なため、即採用するものではなさそう ◦ Next.js には 1.x.x が使えないため 2.0.0-alpha.5 を使うことになる