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

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

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

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

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

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設計の必要性 変わること 変わらないこと