Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. 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