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.3k
linaria: Zero-Runtime CSS in JS
社内エンジニア勉強会
petamoriken / 森建
July 31, 2020
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.4k
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
520
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
240
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.1k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
560
DOM Observable
petamoriken
1
260
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
690
Contributing to Deno is fun!
petamoriken
0
370
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.9k
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
3
6k
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
ニーリーにおけるプロダクトエンジニア
nealle
0
780
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
Discover Metal 4
rei315
2
120
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
280
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
160
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
Goで作る、開発・CI環境
sin392
0
220
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
XP, Testing and ninja testing
m_seki
3
230
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
260
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Optimizing for Happiness
mojombo
379
70k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
We Have a Design System, Now What?
morganepeng
53
7.7k
Building Applications with DynamoDB
mza
95
6.5k
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 を使うことになる