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

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

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

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

概要 • 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); }

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

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

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

使い分けの具体例 $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); } グローバルで静的な変数(定数) メディアクエリで 動的に変更したい ボタンのスタイル

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

CSS変数 実践⼊⾨ • NES.css@next（次バージョンのProposals段階）
 https://github.com/nostalgic-css/NES.css/issues/331 • スタイルが複雑で、テーマ⾊を変えるのが⼤変 • CSS変数をベースにフレキシブルな
 CSSフレームワークを⽬指す

NES.cssの使いづらいところ① .my-theme { background-color: #98E800; }

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

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

CSS変数の副作⽤ 顧客が必要だったもの プログラマのコード .my-theme { --background-color: #98E800; } ⼦要素にも適⽤される

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

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

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

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

参考サイト ✨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