Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
2020.11.14 @WCAN 2020 Frontend Special 綿貫佳祐 Increments CSS in JS 変わること変わらないこと で
Slide 2
Slide 2 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 2017年 2020年 株式会社エイチームに新卒入社 株式会社エイチームライフスタイルに配属 Increments株式会社に異動 綿貫 佳祐 @xrxoxcxox
Slide 3
Slide 3 text
エンジニア採用支援サービス 社内向け情報共有サービス プログラミングに特化した情報共有コミュニティ CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special
Slide 4
Slide 4 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸ ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
Slide 5
Slide 5 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸ ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
Slide 6
Slide 6 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special
Slide 7
Slide 7 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special まず間違いなくNG 小さいComponentなら全然OK
Slide 8
Slide 8 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 人間が規則で対処するもの →意識しなくて良い存在へ
Slide 9
Slide 9 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸ ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
Slide 10
Slide 10 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS: modifier的なものが増えがち
Slide 11
Slide 11 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS in JS: 1つのComponentでOK
Slide 12
Slide 12 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special
Slide 13
Slide 13 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 事前に種類を宣言しておく →変化を受けて対応できる
Slide 14
Slide 14 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによるスタイル分岐のしやすさ ❸ ライブラリを理解する必要性 ❶ スタイルの競合と命名規則 変わること
Slide 15
Slide 15 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 出来そうで出来ない書き方(Emotion v10)
Slide 16
Slide 16 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special Webの標準 →あくまでライブラリ
Slide 17
Slide 17 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ タイプセレクターの扱い ❸ マークアップとの関わり方 ❶ CSS設計の必要性 変わらないこと
Slide 18
Slide 18 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ タイプセレクターの扱い ❸ マークアップとの関わり方 ❶ CSS設計の必要性 変わらないこと
Slide 19
Slide 19 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special Utility Trumps Illustration by Freepik Stories
Slide 20
Slide 20 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 毎回同じ記述するのはダルい VS コンポーネントに閉じ込めた 意味がなくなる
Slide 21
Slide 21 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 拠り所を作る意味でも CSS設計は必要
Slide 22
Slide 22 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 変わらないこと ❷ タイプセレクターの扱い ❸ マークアップとの関わり方 ❶ CSS設計の必要性
Slide 23
Slide 23 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special
Slide 24
Slide 24 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special someStyleを適用したコンポーネントの下では 全てのdivにmargin-topがつくし、全てのpは赤くなる
Slide 25
Slide 25 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special Shadow DOMでないので あくまでCSSはグローバル
Slide 26
Slide 26 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special 変わらないこと ❷ タイプセレクターの扱い ❸ マークアップとの関わり方 ❶ CSS設計の必要性
Slide 27
Slide 27 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS in JSを導入したからって マークアップが 適当で良くなることは無い
Slide 28
Slide 28 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special CSS in JSは+α便利になる ツールでしかない
Slide 29
Slide 29 text
CSS in JSで変わること変わらないこと WCAN 2020 Frontend Special ❷ ロジックによる スタイル分岐のしやすさ ❷ タイプセレクターの扱い ❸ ❸ ライブラリを理解する必要性 マークアップとの関わり方 ❶ ❶ スタイルの競合と命名規則 CSS設計の必要性 変わること 変わらないこと