Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

CSS in JSはいいぞ

CSS in JSはいいぞ

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

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

たふみ

March 20, 2021
Tweet

More Decks by たふみ

Other Decks in Programming

Transcript

  1. 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)
  2. 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”
  3. HTML and CSS 6 HTML CSS 1. Why “CSS in

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

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

    in JS” 1.1 Power of “CSS in JS”
  6. 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”
  7. 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”
  8. 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”
  9. 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”
  10. Ideally...... 6 HTML CSS 1. Why “CSS in JS” 1.1

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

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

    Power of “CSS in JS” Completely Isolated
  13. Components 7 1. Why “CSS in JS” 1.1 Power of

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

    “CSS in JS” Document: - Set of Components Component: - Set of Components with Changes
  15. 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
  16. 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
  17. Maintainability 11 1. Why “CSS in JS” 1.1 Power of

    “CSS in JS” Good, but... - CSS Specificity (詳細度) - Naming for Class Name
  18. 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
  19. 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
  20. 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
  21. CSS in JS: Example 13 1. Why “CSS in JS”

    1.1 Power of “CSS in JS”
  22. 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”
  23. 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)
  24. 2.1 What Else Do We Need? - Scoping - CSS

    & Type → Constraints & Flexibility 17 2. More for “CSS in JS”
  25. 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?
  26. 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?
  27. 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)
  28. 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)
  29. 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</ > < = ”> < = ”> < /> </ > </ >
  30. 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”> < /> </ >
  31. 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”> < /> </ >
  32. 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?
  33. 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?
  34. 2. More for “CSS in JS” 2.1 What Else Do

    We Need? CSS & Type CSS in JS ↓ CSS in TS 25
  35. CSS & Type JS ↓ TS CSS in CSS in

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

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

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

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

    30 2. More for “CSS in JS” 2.1 What Else Do We Need?
  40. 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?
  41. 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?
  42. 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
  43. CSS & Type - Case 1 If adding one element…?

    35 2. More for “CSS in JS” 2.2 Further Concepts
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. CSS & Type What structures are appropriate? 40 2. More

    for “CSS in JS” 2.2 Further Concepts
  50. 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
  51. 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
  52. Future Work [Declaration] export const a: CSSObject = { color:

    “red” } [Caller] const override = { [a]: { color: “blue” } } 44 3. Future Work
  53. Future Work Problem const a = { hello: “world” }

    const b = { hello: “world” } const c = { [a]: “another world” } c[b] // another world 45 3. Future Work
  54. 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