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