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.4k
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
560
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
250
フロントエンドの標準仕様をどう追っているか / How I follow the frontend standards specs
petamoriken
4
2.3k
ECMAScript、Web標準の型はどう管理されているか / How ECMAScript and Web standards types are maintained
petamoriken
3
580
DOM Observable
petamoriken
1
280
Deno に Web 標準 API を実装する / Implementing Web standards API to Deno
petamoriken
0
710
Contributing to Deno is fun!
petamoriken
0
390
Stage 2 Decorators の変遷 / Stage 2 Decorators history
petamoriken
0
7k
Other Decks in Programming
See All in Programming
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
はじめてのMaterial3 Expressive
ym223
2
900
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
780
チームのテスト力を鍛える
goyoki
3
930
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
640
Navigating Dependency Injection with Metro
zacsweers
3
3.5k
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Documentation Writing (for coders)
carmenintech
74
5k
Six Lessons from altMBA
skipperchong
28
4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Scaling GitHub
holman
463
140k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Designing for humans not robots
tammielis
253
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Designing for Performance
lara
610
69k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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 を使うことになる