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

CSS Custom Properties実践入門 / Getting Started wit...

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

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

https://twitter.com/bc_rikko

ダーシノ

July 04, 2019
Tweet

More Decks by ダーシノ

Other Decks in Programming

Transcript

  1. 話すこと 1. CSS変数の概要 2. メリット・デメリット 3. CSS変数 vs プリプロセッサ変数 4.

    JavaScriptで操作 5. CSS変数 実践⼊⾨ CSS Custom Propertiesを「CSS変数」 SassやStylusなどの変数を「プリプロセッサ変数」と呼ぶ
  2. 概要 • 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); }
  3. プリプロセッサ変数との違い // SCSS $color: black; .message { color: $color; }

    // コンパイル後 .message { color: black; } // CSS変数 :root { --color: black; } .message { color: var(--color); } CSS変数 プリプロセッサ変数 宣⾔ :rootやセレクタ内のみ どこでもOK 変数の値 動的(実⾏時に決定) 静的(変数は消える) 構⽂
  4. メリット・デメリット • 疑似クラスやメディアクエリ内で動的に変更できる • JavaScriptで簡単に変更できる • テーマ変更のような操作が楽 • 実⾏時にCSS変数の中⾝が決まるので複雑になりやすい •

    CSS変数がどこに影響するか分かりづらく保守しづらい • CSS変数を書き換えたら他の要素にも影響する • ファイルサイズがちょっと増える(var(̶variable)と書くため) メリット デメリット
  5. 使い分けの具体例 $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); } グローバルで静的な変数(定数) メディアクエリで 動的に変更したい ボタンのスタイル
  6. 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>
  7. 根が深い(詳細度問題) <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> 詳細度が低くて適⽤されない
  8. 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>
  9. 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> ⼦要素にも適⽤される
  10. 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> 影が変わらない
  11. スタイルが当てづらい <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> ユーザーがボーダーの サイズを知る必要がある
  12. 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>
  13. 参考サイト ✨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