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

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

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

https://twitter.com/bc_rikko

6154244654c5f07cdf7c09da61bfe55f?s=128

ダーシノ

July 04, 2019
Tweet

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