CSS Custom Properties実践入門 / Getting Started with CSS Custom Properties

CSS Custom Properties（CSS Variables、CSS変数）の基礎からメリット・デメリット、Sass/Stylusなどのプリプロセッサ変数との使い分け、NES.cssを題材に実践的な事例を紹介。

https://twitter.com/bc_rikko

Transcript

1. CSS Custom Properties
   実践⼊⾨
   フロントエンド交流会 - 2019/07/04
   ダーシノ(@bc_rikko)
   

   View Slide

2. ⾃⼰紹介
   ダーシノ（@bc_rikko）
   さくらインターネット
   フロントエンドエンジニア
   ファミコン⾵CSSフレームワーク
   NES.css
   世界ランク 4位
   ※GitHub css-frameworkトピックしらべ
   

   View Slide

3. 話すこと
   1. CSS変数の概要
   2. メリット・デメリット
   3. CSS変数 vs プリプロセッサ変数
   4. JavaScriptで操作
   5. CSS変数 実践⼊⾨
   CSS Custom Propertiesを「CSS変数」
   SassやStylusなどの変数を「プリプロセッサ変数」と呼ぶ
   

   View Slide

4. 概要
   • CSS Custom Properties（CSS Variables）は、プロ
   グラミングの変数と同様の機能をCSSで使う仕組み
   • CSSプリプロセッサの変数とは違う！（後述）
   /* 宣⾔ */
   [selector] {
   --variable: value;
   }
   /* 使⽤ */
   [selector] {
   property: var(--variable);
   }
   

   View Slide

5. 概要
   • CSS変数は⼦要素にも影響する
   • 要素にCSS変数がない場合は、親要素の値を使う
   
   
   
   .parent {
   --color: black;
   --bg-color: white;
   color: var(--color);
   background-color: var(--bg-color);
   }
   .child {
   --color: red;
   color: var(--color);
   background-color: var(--bg-color);
   }
   

   View Slide

6. プリプロセッサ変数との違い
   // SCSS
   $color: black;
   .message {
   color: $color;
   }
   // コンパイル後
   .message {
   color: black;
   }
   // CSS変数
   :root {
   --color: black;
   }
   .message {
   color: var(--color);
   }
   CSS変数 プリプロセッサ変数
   宣⾔ :rootやセレクタ内のみ どこでもOK
   変数の値 動的（実⾏時に決定） 静的（変数は消える）
   構⽂
   

   View Slide

7. メリット・デメリット
   • 疑似クラスやメディアクエリ内で動的に変更できる
   • JavaScriptで簡単に変更できる
   • テーマ変更のような操作が楽
   • 実⾏時にCSS変数の中⾝が決まるので複雑になりやすい
   • CSS変数がどこに影響するか分かりづらく保守しづらい
   • CSS変数を書き換えたら他の要素にも影響する
   • ファイルサイズがちょっと増える（var(̶variable)と書くため）
   メリット
   デメリット
   

   View Slide

8. CSS変数とプリプロセッサ変数
   の使い分け
   • 可能な限りプリプロセッサ変数を使う
   • 何も考えずにCSS変数に置き換えるのは危険
   • 特にグローバルで静的な値はプリプロセッサ変数を使う
   • 擬似クラス、メディアクエリで動的に変更したいなど、

   明確な理由があるときはCSS変数を使う
   

   View Slide

9. 使い分けの具体例
   $size-s: 1em;
   $size-m: 1.5em;
   $size-l: 2em;
   .btn {
   --button-size: #{$size-s};
   }
   @media screen and (min-width: 600px) {
   .btn {
   --button-size: #{$size-m};
   }
   }
   @media screen and (min-width: 1200px) {
   .btn {
   --button-size: #{$size-l};
   }
   }
   .btn {
   font-size: var(--button-size);
   }
   グローバルで静的な変数(定数)
   メディアクエリで
   動的に変更したい
   ボタンのスタイル
   

   View Slide

10. JSでCSS変数を扱う
    document
    .querySelector(':root')
    .style
    .setProperty('--button-size', '10px');
    CSS変数をJavaScriptで動的に変更し、複数のスタイルに⼀括適⽤する | Black Everyday Company
    https://kuroeveryday.blogspot.com/2018/03/change-css-valiables-by-javascript.html
    

    View Slide

11. CSS変数 実践⼊⾨
    • NES.css@next（次バージョンのProposals段階）

    https://github.com/nostalgic-css/NES.css/issues/331
    • スタイルが複雑で、テーマ⾊を変えるのが⼤変
    • CSS変数をベースにフレキシブルな

    CSSフレームワークを⽬指す
    

    View Slide

12. NES.cssの使いづらいところ①
    
    
    NES.css@next
    Default theme.
    
    
    
    
    NES.css@next
    If you want to change the
    theme color.
    
    
    <br/>.my-theme {<br/>background-color: #98E800;<br/>}<br/>
    

    View Slide

13. 根が深い（詳細度問題）
    
    
    NES.css@next
    
    
    <br/>/* NG */<br/>.my-theme .title {<br/>background-color: #98E800;<br/>}<br/>.my-theme .nes-container > .title {<br/>background-color: #98E800;<br/>}<br/>/* OK */<br/>.my-theme<br/>.nes-container.with-title > .title {<br/>background-color: #98E800;<br/>}<br/>
    詳細度が低くて適⽤されない
    

    View Slide

14. CSS変数で解決
    
    
    NES.css@next
    ...
    
    
    <br/>.my-theme {<br/>--background-color: #98E800;<br/>}<br/>// NES.css<br/>.nes-container {<br/>&.with-title {<br/>> .title {<br/>background-color:<br/>var(--background-color);<br/>}<br/>}<br/>}<br/>
    

    View Slide

15. CSS変数の副作⽤
    顧客が必要だったもの
    プログラマのコード
    
    
    NES.css@next
    If you want to change the
    theme color.
    
    Learn more!
    
    
    <br/>.my-theme {<br/>--background-color: #98E800;<br/>}<br/>
    ⼦要素にも適⽤される
    

    View Slide

16. NES.cssの使いづらいところ②
    
    Normal
    
    
    My Theme
    
    <br/>.nes-btn.my-theme {<br/>color: white;<br/>background-color: #5676E7;<br/>}<br/>
    影が変わらない
    

    View Slide

17. スタイルが当てづらい
    
    My Theme
    
    <br/>.nes-btn.my-theme {<br/>color: white;<br/>background-color: #5676E7;<br/>}<br/>.nes-btn.my-theme::after {<br/>box-shadow:<br/>inset<br/>-4px<br/>-4px<br/>#0E72A3;<br/>}<br/>
    ユーザーがボーダーの
    サイズを知る必要がある
    

    View Slide

18. CSS変数で解決
    
    My Theme
    
    <br/>.nes-btn.my-theme {<br/>--color: white;<br/>--background-color: #5676E7;<br/>--shadow-color: #0E72A3;<br/>}<br/>// NES.css<br/>.nes-btn {<br/>color: var(--color);<br/>background-color:<br/>var(--background-color);<br/>&::after {<br/>box-shadow: inset -4px -4px<br/>var(―shadow-color);<br/>}<br/>}<br/>
    

    View Slide

19. まとめ
    • CSS変数は便利だけど過信は禁物
    • CSS変数をなんとなくで使わない
    • 闇を⽣み出しやすい
    • 可能な限り静的な変数のほうが良い
    • デメリットを理解してから使う
    

    View Slide

20. 参考サイト
    ✨NES.css@next Proposals - Issue#331
    https://github.com/nostalgic-css/NES.css/issues/331
    box-shadow - MDN
    https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow
    CSS変数をJavaScriptで動的に変更し、複数のスタイルに⼀括適⽤する
    https://kuroeveryday.blogspot.com/2018/03/change-css-valiables-by-javascript.html
    

    View Slide