Slide 1
Slide 1 text
linaria
Zero-Runtime CSS in JS
pixiv Inc.
petamoriken
2020.7.31
Slide 2
Slide 2 text
2
自己紹介まわり
● 主にフロントエンドエンジニア
● ECMAScript や WHATWG DOM を追うのが好き
● iOSDC Japan 2020 のサイト制作を担当しました
petamoriken
課題解決部
Slide 3
Slide 3 text
3
HTML(JSX) と CSS の連携
● HTML(JSX) と CSS ファイルが分かれたタイプ
○ BEM によるクラス管理
○ CSS Modules
● CSS in JS
○ styled-components / emotion
○ jss
Slide 4
Slide 4 text
4
HTML(JSX) と CSS の連携
● HTML(JSX) と CSS ファイルが分かれたタイプ
○ BEM によるクラス管理
○ CSS Modules
● CSS in JS
○ styled-components / emotion
○ jss
Slide 5
Slide 5 text
const StyledButton = styled.button`
color: blue;
width: ${(props) => props.width}px;
`;
styled-components / emotion
5
JSX HTML (レンダリング後)
Slide 6
Slide 6 text
6
styled-components / emotion について
● 利点
○ CSS との連携を考えなくて良くなる
● 問題点
○ JS のランタイムで実行されるためパフォーマンスに問題がある
スタイル付けされたCSS-in-JS実装は、スタイル付けされていないバージョンと比べ
て50%以上もレンダリングに時間がかかるように見えた。
https://www.infoq.com/jp/news/2020/01/css-cssinjs-performance-cost/
○ ランタイムに stylis.js を使っていてカスタマイズしづらい
Slide 7
Slide 7 text
7
Slide 8
Slide 8 text
const StyledButton = styled.button`
color: blue;
width: ${(props) => props.width}px;
`;
linaria
8
JSX
.abcd1234 {
color: blue;
width: var(--abcd1234-0);
}
CSS
HTML (レンダリング後)
Slide 9
Slide 9 text
9
linaria について
● 利点
○ パフォーマンスの問題を解決
○ コンパイル時に PostCSS によるカスタマイズが可能
● 問題点
○ IE 11 非対応
○ ランタイムで styled-components / emotion ほどの柔軟性はない
css prop が使えない / CSS プロパティの出し分けが出来ない
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
12
linaria を使ってみた所感
● styled-components / emotion とほとんど同じ書き方が可能
○ コンパイル時に CSS が静的解析できないといけないことに注意
○ 書いていて特に困ることはなかった
● まだまだ発展途上なため、即採用するものではなさそう
○ Next.js には 1.x.x が使えないため 2.0.0-alpha.5 を使うことになる