Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
linaria: Zero-Runtime CSS in JS
Search
petamoriken / 森建
July 31, 2020
Programming
2
2.1k
linaria: Zero-Runtime CSS in JS
社内エンジニア勉強会
petamoriken / 森建
July 31, 2020
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
DOM Observable
petamoriken
1
120
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
460
Contributing to Deno is fun!
petamoriken
0
230
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
730
Multithreading WebAssembly by Rust
petamoriken
3
980
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by Pure Rust
petamoriken
0
1.1k
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
petamoriken
2
810
バイト列から整数を得る
petamoriken
1
520
Other Decks in Programming
See All in Programming
CSC307 Lecture 13
javiergs
PRO
0
150
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
CSC307 Lecture 08
javiergs
PRO
0
330
Introduction to GitOps
hwchiu
0
110
Composing an API the *right* way (Droidcon Berlin 2024)
zsmb
1
450
生成AIをkintoneに連携してみた
hideg
0
230
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
ぼっちを避けて楽しむためのアノテコノテ / Various Tips and Tricks to Avoid Loneliness and Have Fun
nrslib
3
1.7k
CSC307 Lecture 14
javiergs
PRO
0
220
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Designing with Data
zakiwarfel
96
5k
The Invisible Side of Design
smashingmag
294
50k
Producing Creativity
orderedlist
PRO
340
39k
Clear Off the Table
cherdarchuk
89
320k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Web development in the modern age
philhawksworth
203
10k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
4 Signs Your Business is Dying
shpigford
178
21k
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 を使うことになる