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
2k
linaria: Zero-Runtime CSS in JS
社内エンジニア勉強会
petamoriken / 森建
July 31, 2020
Tweet
Share
More Decks by petamoriken / 森建
See All by petamoriken / 森建
DOM Observable
petamoriken
1
85
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
390
Contributing to Deno is fun!
petamoriken
0
170
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
5.8k
ESNext の議論に参加しよう / Join the ESNext discussion
petamoriken
3
680
Multithreading WebAssembly by Rust
petamoriken
3
920
WebAssembly で WebP のデコードを試した / Decode WebP with WebAssembly by Pure Rust
petamoriken
0
1k
TC39 で提案されている ECMAScript 最新仕様 / ECMAScript latest specification proposed in TC39
petamoriken
2
740
バイト列から整数を得る
petamoriken
1
490
Other Decks in Programming
See All in Programming
単体テストを書かない技術 #phpcon_odawara
o0h
PRO
27
8.3k
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
840
⼤規模⾔語モデルの拡張(RAG)が 終わったかも知れない件について
nearme_tech
23
15k
Fast JSX: Don't clone props object #28768
yossydev
1
130
AmperとFleetを使ったAndroidアプリ
yoppie
0
120
Elm 0.19.0 Changes
bkuhlmann
0
490
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
370
Anthropic Cookbook のおすすめレシピ
schroneko
7
1k
Netty Chicago Java User Group 2024-04-17
sullis
0
180
Blue/Greenデプロイの導入による 運用フローの改善
kudoas
1
380
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
9
4.1k
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
Happy Clients
brianwarren
92
6.4k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
6
1.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Optimizing for Happiness
mojombo
370
69k
Web development in the modern age
philhawksworth
202
10k
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 を使うことになる