Tweet
Tweet

Slide 1

Slide 1 text

CSS in JS はいいぞ（または再利用可能なコ ンポーネント設計についての一考察）
 ※個人の感想であり所属する機関・団体を代 表するものではなく，また効果・効能を必ず しも示すものではありません。 NEW DEBUG!! #3.0 ~テストが通らないなら消せばいいじゃない~ たふみ, DE LIKER 2021-03-20 お 気 持 ち 表 明 L T

Slide 2

Slide 2 text

$ whoami たふみ (@CreatorQsF) Designer and Developer https://qsf.de-liker.com (Ads: Hiring for New Design System) 1 CSS in JS

Slide 3

Slide 3 text

Outline / TOC 2

Slide 4

Slide 4 text

Outline / TOC 1. Why “CSS in JS” ? 1.1 Power of “CSS in JS” 1.2 Preferable cases (limitation) 2. More for “CSS in JS” 2.1 What else do we need? 2.2 Further concepts 3. Future work (kind of) 3 CSS in JS (Opinions are My Own)

Slide 5

Slide 5 text

Why “CSS in JS” ? 4 1

Slide 6

Slide 6 text

1.1 Power of “CSS in JS” HTML: Markup Language → Structure of Documents CSS: Style Sheet Language → Presentation of Documents 5 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 7

Slide 7 text

HTML and CSS 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 8

Slide 8 text

HTML and CSS 6 HTML CSS Connection 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 9

Slide 9 text

HTML and CSS 6 HTML CSS Connection 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 10

Slide 10 text

HTML and CSS 6 HTML CSS class / id parent / child R E Q U I R E S 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 11

Slide 11 text

HTML and CSS 6 HTML CSS class / id parent / child R E Q U I R E S Should know about the structure of documents 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 12

Slide 12 text

HTML and CSS 6 HTML CSS (Sometimes) modify its structure for styling R E Q U I R E S 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 13

Slide 13 text

HTML and CSS 6 HTML CSS (Sometimes) modify its structure for styling R E Q U I R E S 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 14

Slide 14 text

Ideally...... 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Completely Isolated

Slide 15

Slide 15 text

Ideally...... 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Completely Isolated

Slide 16

Slide 16 text

Ideally...... 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Completely Isolated

Slide 17

Slide 17 text

Components 7 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Document: - Set of Components Component: - Set of Components

Slide 18

Slide 18 text

Components 7 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Document: - Set of Components Component: - Set of Components with Changes

Slide 19

Slide 19 text

Components 7 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Document: - Set of Components Component: - Set of Components with Changes HTML Fragments + Style Component: = HTML (Fragments) → CSS

Slide 20

Slide 20 text

Maintainability 8 1. Why “CSS in JS” 1.1 Power of “CSS in JS” https://qiita.com/nibushibu/items/1c56a1e7b3f6d6c22615 BEM, FLOCSS, ITCSS, etc... Ref: “自分にちょうどいいCSSの書き方” Retrived from

Slide 21

Slide 21 text

Maintainability 9 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 22

Slide 22 text

Maintainability 10 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 23

Slide 23 text

Maintainability 11 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Good, but... - CSS Specificity (詳細度) - Naming for Class Name

Slide 24

Slide 24 text

CSS in JS 12 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Using JS modulality, - No more needed (really?) to name of style carefully - No more needed (ideally) to pay attention to specificity - Constraints - Closure

Slide 25

Slide 25 text

CSS in JS 12 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Using JS modulality, - No more needed (really?) to name of style carefully - No more needed (ideally) to pay attention to specificity - Constraints - Closure

Slide 26

Slide 26 text

CSS in JS: Example 13 1. Why “CSS in JS” 1.1 Power of “CSS in JS” apperance backgroundColor border borderRadius color fontWeight padding textTransform '@emotion/react' 'none' 'var(--theme)' 'none' 4 'var(--blackish)' 900 '8px 16px' 'uppercase' { CSSObject, jsx } style: CSSObject = { : , : , : , : , : , : , : , : , } import from const /** @jsx jsx */ button span span button fontSize css css 16 {style} {styleText} styleText: CSSObject = { : , } Button = () => ( < = > < = >Hello > > ) const export const

Slide 27

Slide 27 text

CSS in JS: Example 13 1. Why “CSS in JS” 1.1 Power of “CSS in JS”

Slide 28

Slide 28 text

1.2 Preferable Cases (limitation) - Component based web application - Required to be reusable - DO NOT use selector to affect children (e.g. “& > *”) 14 1. Why “CSS in JS”

Slide 29

Slide 29 text

When to Avoid - Not web application, just web site - Document or Application - Too many subtle changes to components 15 1. Why “CSS in JS” 1.2 Preferable Cases (limitation)

Slide 30

Slide 30 text

More for “CSS in JS” 16 2

Slide 31

Slide 31 text

2.1 What Else Do We Need? - Scoping - CSS & Type → Constraints & Flexibility 17 2. More for “CSS in JS”

Slide 32

Slide 32 text

Scoping Lexical Scoping. Variable scopes are determined lexically. Dynamic Scoping. Variable scopes would be dependent on the environment, in what context. 18 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 33

Slide 33 text

Scoping -> JavaScript → CSS Lexical Scoping. Variable scopes are determined lexically. Dynamic Scoping. Variable scopes would be dependent on the environment, in what context. 18 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 34

Slide 34 text

Scoping Lexical Scoping 19 2. More for “CSS in JS” 2.1 What Else Do We Need? Env X x = 1 f() // x == 1 (Declaration) Env Y x = 2 f() // x == 1 (Runtime)

Slide 35

Slide 35 text

Scoping Dynamic Scoping 20 2. More for “CSS in JS” 2.1 What Else Do We Need? Env X x = 1 f() // x == 1 (Declaration) Env Y x = 2 f() // x == 2 (Runtime)

Slide 36

Slide 36 text

Scoping - CSS Variable Dynamic Scoping 21 2. More for “CSS in JS” 2.1 What Else Do We Need? style var --variable style red style blue p p div div Component div div ”color: ”--variable: ”--variable: Component = () => < = ( )”>hoge > < = ”> < = ”> < /> > >

Slide 37

Slide 37 text

Scoping - CSS Variable Dynamic Scoping 22 2. More for “CSS in JS” 2.1 What Else Do We Need? style var --variable style p p div Component div ”color: ”--variable: Component = () => < = ( )”>hoge > < = green”> < /> >

Slide 38

Slide 38 text

Scoping - CSS Variable Dynamic Scoping 23 2. More for “CSS in JS” 2.1 What Else Do We Need? style var --variable style p p div Component div ”color: ”--variable: Component = () => < = ( )”>hoge > < = green”> < /> >

Slide 39

Slide 39 text

CSS & Type div div color css style color { style: (color: string): CSSObject => { : color } Component = ({ color }: { color: string }) => ( < = ( ) }>Hello > ) const export const 24 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 40

Slide 40 text

CSS & Type div div color css style color { style: (color: string): CSSObject => { : color } Component = ({ color }: { color: string }) => ( < = ( ) }>Hello > ) const export const 24 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 41

Slide 41 text

2. More for “CSS in JS” 2.1 What Else Do We Need? CSS & Type CSS in JS ↓ CSS in TS 25

Slide 42

Slide 42 text

CSS & Type JS ↓ TS CSS in CSS in 26 1. Why “CSS in JS” 1.2 Preferable Cases (limitation)

Slide 43

Slide 43 text

CSS & Type JS ↓ TS CSS in CSS in 27 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 44

Slide 44 text

CSS & Type JS ↓ TS CSS in CSS in 28 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 45

Slide 45 text

CSS & Type JS ↓ TS CSS in CSS in 29 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 46

Slide 46 text

CSS & Type JS ↓ TS CSS in CSS in 30 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 47

Slide 47 text

CSS & Type 31 ComplexComponentWithStyle = ({ children, theme, }: { theme?: NoExcess> children?: ReactNode }) => { return (
{children}
) } export const 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 48

Slide 48 text

CSS & Type 32 `Properties of given object seems excessive` type NoExcess = T & (Exclude extends never ? {} : ) export 2. More for “CSS in JS” 2.1 What Else Do We Need?

Slide 49

Slide 49 text

2.2 Further Concepts How to pass CSSObject to extend? 33 2. More for “CSS in JS”

Slide 50

Slide 50 text

CSS & Type - Case 1 color backgroundColor 'red' 'blue' _style1: CSSObject = { : , } _style2: CSSObject = { : , } const const 34 2. More for “CSS in JS” 2.2 Further Concepts div div div div style1? css ..._style1 ...style1 css ..._style2 ...style2 {{ {{ Component = ({ style1, style2, }: { : CSSObject style2?: CSSObject }) => ( < = , }}> < = , }}>Hello > > ) export const

Slide 51

Slide 51 text

CSS & Type - Case 1 If adding one element…? 35 2. More for “CSS in JS” 2.2 Further Concepts

Slide 52

Slide 52 text

CSS & Type - Case 1 color backgroundColor 'red' 'blue' _style1: CSSObject = { : , } _style2: CSSObject = { : , } const const 36 style1? Component = ({ style1, style2, style3, }: { : CSSObject style2?: CSSObject style3?: CSSObject }) => ( // ... export const 2. More for “CSS in JS” 2.2 Further Concepts

Slide 53

Slide 53 text

CSS & Type - Case 1 color backgroundColor 'red' 'blue' _style1: CSSObject = { : , } _style2: CSSObject = { : , } const const 36 style1? Component = ({ style1, style2, style3, }: { : CSSObject style2?: CSSObject style3?: CSSObject }) => ( // ... export const 2. More for “CSS in JS” 2.2 Further Concepts

Slide 54

Slide 54 text

CSS & Type - Case 1 After all, even with CSS in JS - Naming - Moderate maintainability - Too many arguments 37 2. More for “CSS in JS” 2.2 Further Concepts

Slide 55

Slide 55 text

CSS & Type - Case 2 css ..._style1 ...style 0 css ..._style2 ...style 1 div div div div {{ {{ Component = ({ style }: { style: CSSObject[] }) => ( < = , [ ] }}> < = , [ ] }}>Hello > > ) export const 38 2. More for “CSS in JS” 2.2 Further Concepts

Slide 56

Slide 56 text

CSS & Type - Case 2 Clearly bad practice, - Dependent on the order / name - Object → X - Array → X 39 2. More for “CSS in JS” 2.2 Further Concepts

Slide 57

Slide 57 text

CSS & Type What structures are appropriate? 40 2. More for “CSS in JS” 2.2 Further Concepts

Slide 58

Slide 58 text

2. More for “CSS in JS” 2.2 Further Concepts CSS & Type Ideally, Weaving? Injection? Component =
← style1 = hoge
← style2 = fuga ... 41

Slide 59

Slide 59 text

Future Work 42 3

Slide 60

Slide 60 text

Future Work [Component Declaration] 1. Export all the styles (CSSObject) [*1] 2. To modify the style, use the exported style as key [*1] Naming is arbitary as long as it is tracable 43 3. Future Work

Slide 61

Slide 61 text

Future Work [Declaration] export const a: CSSObject = { color: “red” } [Caller] const override = { [a]: { color: “blue” } } 44 3. Future Work

Slide 62

Slide 62 text

Future Work Problem const a = { hello: “world” } const b = { hello: “world” } const c = { [a]: “another world” } c[b] // another world 45 3. Future Work

Slide 63

Slide 63 text

Future Work To avoid, use Generator function function* 46 3. Future Work

Slide 64

Slide 64 text

Future Work 47 3. Future Work f = * () { let i = 0 while (true) { yield i++ } } const c = f() c.next().value // 0 c.next().value // 1 c.next().value // 2 const function

Slide 65

Slide 65 text

CSS in JS はいいぞ（または再利用可能なコ ンポーネント設計についての一考察）
 ※個人の感想であり所属する機関・団体を代 表するものではなく，また効果・効能を必ず しも示すものではありません。 NEW DEBUG!! #3.0 ~テストが通らないなら消せばいいじゃない~ たふみ, DE LIKER 2021-03-20 お 気 持 ち 表 明 L T 48