CSS in JSはいいぞ

CSS in JSはいいぞ（または再利用可能なコンポーネント設計についての一考察）※個人の感想であり所属する機関・団体を代表するものではなく，また効果・効能を必ずしも示すものではありません。

このスライドは，2021-03-21にライブ配信プラットフォームCASPURで行われたLT「NEW DEBUG!! #3.0 ~テストが通らないなら消せばいいじゃない~」で発表されたものです。

Transcript

1. CSS in JS はいいぞ（または再利用可能なコ ンポーネント設計についての一考察）
 ※個人の感想であり所属する機関・団体を代 表するものではなく，また効果・効能を必ず しも示すものではありません。 NEW DEBUG!! #3.0 ~テストが通らないなら消せばいいじゃない~ たふみ, DE LIKER 2021-03-20 お 気 持 ち 表 明 L T
2. $ whoami たふみ (@CreatorQsF) Designer and Developer https://qsf.de-liker.com (Ads: Hiring for New Design System) 1 CSS in JS
3. Outline / TOC 2
4. 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)
5. Why “CSS in JS” ? 4 1
6. 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”
7. HTML and CSS 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS”
8. HTML and CSS 6 HTML CSS Connection 1. Why “CSS in JS” 1.1 Power of “CSS in JS”
9. HTML and CSS 6 HTML CSS Connection 1. Why “CSS in JS” 1.1 Power of “CSS in JS”
10. 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”
11. 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”
12. 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”
13. 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”
14. Ideally...... 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Completely Isolated
15. Ideally...... 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Completely Isolated
16. Ideally...... 6 HTML CSS 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Completely Isolated
17. Components 7 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Document: - Set of Components Component: - Set of Components
18. Components 7 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Document: - Set of Components Component: - Set of Components with Changes
19. 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
20. 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
21. Maintainability 9 1. Why “CSS in JS” 1.1 Power of “CSS in JS”
22. Maintainability 10 1. Why “CSS in JS” 1.1 Power of “CSS in JS”
23. Maintainability 11 1. Why “CSS in JS” 1.1 Power of “CSS in JS” Good, but... - CSS Specificity (詳細度) - Naming for Class Name
24. 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
25. 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
26. 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
27. CSS in JS: Example 13 1. Why “CSS in JS” 1.1 Power of “CSS in JS”
28. 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”
29. 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)
30. More for “CSS in JS” 16 2
31. 2.1 What Else Do We Need? - Scoping - CSS & Type → Constraints & Flexibility 17 2. More for “CSS in JS”
32. 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?
33. 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?
34. 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)
35. 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)
36. 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 <!-- blue --> p p div div Component div div ”color: ”--variable: ”--variable: Component = () => < = ( )”>hoge</ > < = ”> < = ”> < /> </ > </ >
37. Scoping - CSS Variable Dynamic Scoping 22 2. More for “CSS in JS” 2.1 What Else Do We Need? style var --variable style <!-- green --> p p div Component div ”color: ”--variable: Component = () => < = ( )”>hoge</ > < = green”> < /> </ >
38. Scoping - CSS Variable Dynamic Scoping 23 2. More for “CSS in JS” 2.1 What Else Do We Need? style var --variable style <!-- green --> p p div Component div ”color: ”--variable: Component = () => < = ( )”>hoge</ > < = green”> < /> </ >
39. 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?
40. 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?
41. 2. More for “CSS in JS” 2.1 What Else Do We Need? CSS & Type CSS in JS ↓ CSS in TS 25
42. CSS & Type JS ↓ TS CSS in CSS in 26 1. Why “CSS in JS” 1.2 Preferable Cases (limitation)
43. CSS & Type JS ↓ TS CSS in CSS in 27 2. More for “CSS in JS” 2.1 What Else Do We Need?
44. CSS & Type JS ↓ TS CSS in CSS in 28 2. More for “CSS in JS” 2.1 What Else Do We Need?
45. CSS & Type JS ↓ TS CSS in CSS in 29 2. More for “CSS in JS” 2.1 What Else Do We Need?
46. CSS & Type JS ↓ TS CSS in CSS in 30 2. More for “CSS in JS” 2.1 What Else Do We Need?
47. CSS & Type 31 ComplexComponentWithStyle = <T extends CSSObject>({ children, theme, }: { theme?: NoExcess<T, Pick<CSSObject, 'backgroundColor'>> children?: ReactNode }) => { return ( <div css={wrapperStyle}> <button css={{ ...buttonStyle, ...(theme as CSSObject) }}> {children} </button> </div> ) } export const 2. More for “CSS in JS” 2.1 What Else Do We Need?
48. CSS & Type 32 `Properties of given object seems excessive` type NoExcess<T, TExpected> = T & (Exclude<keyof T, keyof TExpected> extends never ? {} : ) export 2. More for “CSS in JS” 2.1 What Else Do We Need?
49. 2.2 Further Concepts How to pass CSSObject to extend? 33 2. More for “CSS in JS”
50. 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
51. CSS & Type - Case 1 If adding one element…? 35 2. More for “CSS in JS” 2.2 Further Concepts
52. 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
53. 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
54. 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
55. 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
56. 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
57. CSS & Type What structures are appropriate? 40 2. More for “CSS in JS” 2.2 Further Concepts
58. 2. More for “CSS in JS” 2.2 Further Concepts CSS & Type Ideally, Weaving? Injection? Component = <div css={style1}> ← style1 = hoge <div css={style2}> ← style2 = fuga ... 41
59. Future Work 42 3
60. 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
61. Future Work [Declaration] export const a: CSSObject = { color: “red” } [Caller] const override = { [a]: { color: “blue” } } 44 3. Future Work
62. Future Work Problem const a = { hello: “world” } const b = { hello: “world” } const c = { [a]: “another world” } c[b] // another world 45 3. Future Work
63. Future Work To avoid, use Generator function function* 46 3. Future Work
64. 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
65. CSS in JS はいいぞ（または再利用可能なコ ンポーネント設計についての一考察）
 ※個人の感想であり所属する機関・団体を代 表するものではなく，また効果・効能を必ず しも示すものではありません。 NEW DEBUG!! #3.0 ~テストが通らないなら消せばいいじゃない~ たふみ, DE LIKER 2021-03-20 お 気 持 ち 表 明 L T 48