Pro Yearly is on sale from $80 to $50! »

CSS in JSで変わること変わらないこと

CSS in JSで変わること変わらないこと

2020年11月14日にWCAN 2020 Frontend Specialというイベントで行うLTのスライドと原稿です。

https://wcan.jp/event/wcan2020-frontend.html

スライドだけでなく、原稿つきのものもアップしています。

https://qiita.com/xrxoxcxox/items/9df67f41ac1f27ca5460

A3db1cdacad2a1b5de5af000a1c94fda?s=128

Keisuke Watanuki

November 14, 2020
Tweet

Transcript

  1. 2020.11.14 @WCAN 2020 Frontend Special 綿貫佳祐 Increments CSS in JS

    変わること変わらないこと で
  2. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 2017年 2020年 株式会社エイチームに新卒入社

    株式会社エイチームライフスタイルに配属 Increments株式会社に異動 綿貫 佳祐 @xrxoxcxox
  3. エンジニア採用支援サービス 社内向け情報共有サービス プログラミングに特化した情報共有コミュニティ CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special

  4. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸

    ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
  5. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸

    ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
  6. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special

  7. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special まず間違いなくNG 小さいComponentなら全然OK

  8. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 人間が規則で対処するもの →意識しなくて良い存在へ

  9. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸

    ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
  10. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS: modifier的なものが増えがち

  11. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS in JS:

    1つのComponentでOK
  12. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special

  13. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 事前に種類を宣言しておく →変化を受けて対応できる

  14. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸

    ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
  15. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 出来そうで出来ない書き方(Emotion v10)

  16. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special Webの標準 →あくまでライブラリ

  17. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ タイプセレクターの扱い ❸

    マークアップとの関わり方 ❶ CSS設計の必要性 変わらないこと
  18. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ タイプセレクターの扱い ❸

    マークアップとの関わり方 ❶ CSS設計の必要性 変わらないこと
  19. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special Utility Trumps Illustration

    by Freepik Stories
  20. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 毎回同じ記述するのはダルい VS コンポーネントに閉じ込めた

    意味がなくなる
  21. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 拠り所を作る意味でも CSS設計は必要

  22. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 変わらないこと ❷ タイプセレクターの扱い

    ❸ マークアップとの関わり方 ❶ CSS設計の必要性
  23. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special

  24. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special someStyleを適用したコンポーネントの下では 全てのdivにmargin-topがつくし、全てのpは赤くなる

  25. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special Shadow DOMでないので あくまでCSSはグローバル

  26. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 変わらないこと ❷ タイプセレクターの扱い

    ❸ マークアップとの関わり方 ❶ CSS設計の必要性
  27. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS in JSを導入したからって

    マークアップが 適当で良くなることは無い
  28. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS in JSは+α便利になる

    ツールでしかない
  29. CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによる スタイル分岐のしやすさ

    ❷ タイプセレクターの扱い ❸ ❸ ライブラリを理解する必要性 マークアップとの関わり方 ❶ ❶ スタイルの競合と命名規則 CSS設計の必要性 変わること 変わらないこと