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)
2. ⾃⼰紹介 ダーシノ（@bc_rikko） さくらインターネット フロントエンドエンジニア ファミコン⾵CSSフレームワーク NES.css 世界ランク 4位 ※GitHub css-frameworkトピックしらべ
3. 話すこと 1. CSS変数の概要 2. メリット・デメリット 3. CSS変数 vs プリプロセッサ変数 4. JavaScriptで操作 5. CSS変数 実践⼊⾨ CSS Custom Propertiesを「CSS変数」 SassやStylusなどの変数を「プリプロセッサ変数」と呼ぶ
4. 概要 • CSS Custom Properties（CSS Variables）は、プロ グラミングの変数と同様の機能をCSSで使う仕組み • CSSプリプロセッサの変数とは違う！（後述） /* 宣⾔ */ [selector] { --variable: value; } /* 使⽤ */ [selector] { property: var(--variable); }
5. 概要 • CSS変数は⼦要素にも影響する • 要素にCSS変数がない場合は、親要素の値を使う <div class="parent"> <div class="child"></div> </div> .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); }
6. プリプロセッサ変数との違い // SCSS $color: black; .message { color: $color; } // コンパイル後 .message { color: black; } // CSS変数 :root { --color: black; } .message { color: var(--color); } CSS変数 プリプロセッサ変数 宣⾔ :rootやセレクタ内のみ どこでもOK 変数の値 動的（実⾏時に決定） 静的（変数は消える） 構⽂
7. メリット・デメリット • 疑似クラスやメディアクエリ内で動的に変更できる • JavaScriptで簡単に変更できる • テーマ変更のような操作が楽 • 実⾏時にCSS変数の中⾝が決まるので複雑になりやすい • CSS変数がどこに影響するか分かりづらく保守しづらい • CSS変数を書き換えたら他の要素にも影響する • ファイルサイズがちょっと増える（var(̶variable)と書くため） メリット デメリット
8. CSS変数とプリプロセッサ変数 の使い分け • 可能な限りプリプロセッサ変数を使う • 何も考えずにCSS変数に置き換えるのは危険 • 特にグローバルで静的な値はプリプロセッサ変数を使う • 擬似クラス、メディアクエリで動的に変更したいなど、
 明確な理由があるときはCSS変数を使う
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); } グローバルで静的な変数(定数) メディアクエリで 動的に変更したい ボタンのスタイル
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
11. CSS変数 実践⼊⾨ • NES.css@next（次バージョンのProposals段階）
 https://github.com/nostalgic-css/NES.css/issues/331 • スタイルが複雑で、テーマ⾊を変えるのが⼤変 • CSS変数をベースにフレキシブルな
 CSSフレームワークを⽬指す
12. NES.cssの使いづらいところ① <section class="default"> <div class="nes-container with-title"> <p class="title">NES.css@next</p> <p>Default theme.</p> </div> </section> <section class="my-theme"> <div class="nes-container with-title"> <p class="title">NES.css@next</p> <p>If you want to change the theme color.</p> </div> </section> <style> .my-theme { background-color: #98E800; } </style>
13. 根が深い（詳細度問題） <section class="my-theme"> <div class="nes-container with-title"> <p class="title">NES.css@next</p> </div> </section> <style> /* 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; } </style> 詳細度が低くて適⽤されない
14. CSS変数で解決 <section class="my-theme"> <div class="nes-container with-title"> <p class="title">NES.css@next</p> <p>...</p> </div> </section> <style> .my-theme { --background-color: #98E800; } // NES.css .nes-container { &.with-title { > .title { background-color: var(--background-color); } } } </style>
15. CSS変数の副作⽤ 顧客が必要だったもの プログラマのコード <section class="my-theme"> <div class="nes-container with-title"> <p class="title">NES.css@next</p> <p>If you want to change the theme color.</p> <button class="nes-btn"> Learn more!</button> </div> </section> <style> .my-theme { --background-color: #98E800; } </style> ⼦要素にも適⽤される
16. NES.cssの使いづらいところ② <button class="nes-btn"> Normal </button> <button class="nes-btn my-theme"> My Theme </button> <style> .nes-btn.my-theme { color: white; background-color: #5676E7; } </style> 影が変わらない
17. スタイルが当てづらい <button class="nes-btn my-theme"> My Theme </button> <style> .nes-btn.my-theme { color: white; background-color: #5676E7; } .nes-btn.my-theme::after { box-shadow: inset -4px -4px #0E72A3; } </style> ユーザーがボーダーの サイズを知る必要がある
18. CSS変数で解決 <button class="nes-btn my-theme"> My Theme </button> <style> .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); } } </style>
19. まとめ • CSS変数は便利だけど過信は禁物 • CSS変数をなんとなくで使わない • 闇を⽣み出しやすい • 可能な限り静的な変数のほうが良い • デメリットを理解してから使う
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