Upgrade to Pro — share decks privately, control downloads, hide ads and more …

linaria: Zero-Runtime CSS in JS

森建
July 31, 2020

linaria: Zero-Runtime CSS in JS

社内エンジニア勉強会

森建

July 31, 2020
Tweet

More Decks by 森建

Other Decks in Programming

Transcript

  1. linaria
    Zero-Runtime CSS in JS
    pixiv Inc.
    petamoriken
    2020.7.31

    View Slide

  2. 2
    自己紹介まわり
    ● 主にフロントエンドエンジニア
    ● ECMAScript や WHATWG DOM を追うのが好き
    ● iOSDC Japan 2020 のサイト制作を担当しました
    petamoriken
    課題解決部

    View Slide

  3. 3
    HTML(JSX) と CSS の連携
    ● HTML(JSX) と CSS ファイルが分かれたタイプ
    ○ BEM によるクラス管理
    ○ CSS Modules
    ● CSS in JS
    ○ styled-components / emotion
    ○ jss

    View Slide

  4. 4
    HTML(JSX) と CSS の連携
    ● HTML(JSX) と CSS ファイルが分かれたタイプ
    ○ BEM によるクラス管理
    ○ CSS Modules
    ● CSS in JS
    ○ styled-components / emotion
    ○ jss

    View Slide

  5. const StyledButton = styled.button`
    color: blue;
    width: ${(props) => props.width}px;
    `;

    styled-components / emotion
    5
    JSX HTML (レンダリング後)

    View Slide

  6. 6
    styled-components / emotion について
    ● 利点
    ○ CSS との連携を考えなくて良くなる
    ● 問題点
    ○ JS のランタイムで実行されるためパフォーマンスに問題がある
    スタイル付けされたCSS-in-JS実装は、スタイル付けされていないバージョンと比べ
    て50%以上もレンダリングに時間がかかるように見えた。
    https://www.infoq.com/jp/news/2020/01/css-cssinjs-performance-cost/
    ○ ランタイムに stylis.js を使っていてカスタマイズしづらい

    View Slide

  7. 7

    View Slide

  8. const StyledButton = styled.button`
    color: blue;
    width: ${(props) => props.width}px;
    `;

    linaria
    8
    JSX
    .abcd1234 {
    color: blue;
    width: var(--abcd1234-0);
    }
    CSS
    style="--abcd1234-0: 50px;">
    HTML (レンダリング後)

    View Slide

  9. 9
    linaria について
    ● 利点
    ○ パフォーマンスの問題を解決
    ○ コンパイル時に PostCSS によるカスタマイズが可能
    ● 問題点
    ○ IE 11 非対応
    ○ ランタイムで styled-components / emotion ほどの柔軟性はない
    css prop が使えない / CSS プロパティの出し分けが出来ない

    View Slide

  10. 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

    View Slide

  11. 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

    View Slide

  12. 12
    linaria を使ってみた所感
    ● styled-components / emotion とほとんど同じ書き方が可能
    ○ コンパイル時に CSS が静的解析できないといけないことに注意
    ○ 書いていて特に困ることはなかった
    ● まだまだ発展途上なため、即採用するものではなさそう
    ○ Next.js には 1.x.x が使えないため 2.0.0-alpha.5 を使うことになる

    View Slide