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.2k
linaria: Zero-Runtime CSS in JS
社内エンジニア勉強会
petamoriken / 森建
July 31, 2020
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
非ブラウザランタイムとWeb標準 / Non-Browser Runtimes and Web Standards
petamoriken
0
430
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
190
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
1.5k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
490
DOM Observable
petamoriken
1
210
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
590
Contributing to Deno is fun!
petamoriken
0
310
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
6.5k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
820
Other Decks in Programming
See All in Programming
.NETでOBS Studio操作してみたけど…… / Operating OBS Studio by .NET
skasweb
0
120
PHPで作るWebSocketサーバー ~リアクティブなアプリケーションを知るために~ / WebSocket Server in PHP - To know reactive applications
seike460
PRO
2
770
サーバーゆる勉強会 DBMS の仕組み編
kj455
1
300
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
300
Package Traits
ikesyo
1
210
ASP.NET Core の OpenAPIサポート
h455h1
0
120
watsonx.ai Dojo #6 継続的なAIアプリ開発と展開
oniak3ibm
PRO
0
170
ESLintプラグインを使用してCDKのセオリーを適用する
yamanashi_ren01
2
240
テストコード書いてみませんか?
onopon
2
340
毎日13時間もかかるバッチ処理をたった3日で60%短縮するためにやったこと
sho_ssk_
1
550
技術的負債と向き合うカイゼン活動を1年続けて分かった "持続可能" なプロダクト開発
yuichiro_serita
0
300
混沌とした例外処理とエラー監視に秩序をもたらす
morihirok
13
2.3k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Speed Design
sergeychernyshev
25
740
Typedesign – Prime Four
hannesfritz
40
2.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
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 を使うことになる