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

コンポーネント指向時代のmargin戦略 / Rethinking the relations...

ダーシノ
September 06, 2021

コンポーネント指向時代のmargin戦略 / Rethinking the relationship between Components and Margins

社内勉強会用

コンポーネントにmarginを持たせて良いのか、Spacer/Stackコンポーネントは有用なのか、比較検討する

ダーシノ

September 06, 2021
Tweet

More Decks by ダーシノ

Other Decks in Programming

Transcript

  1. 1.1. コンポーネント設計とmargin戦略 - Atoms Atoms UIパーツの最小単位のコンポーネント ラベル、テキスト、アイコン、ボタンなど Atoms の margin戦略

    marginは持たない(わかる ) まわりのコンポーネントに影響を与えるため marginの相殺 marginの上書き
  2. 1.2. コンポーネント指向とmargin戦略 - Molecules Molecules Atomsを組み合わせたコンポーネント 入力フォームなど Molecules の margin戦略

    自身のmarginは持たない(わかる ) 子コンポーネントに対してmarginを指定する(ホントに? )
  3. 1.3. コンポーネント指向とmargin戦略 - Organisms Organisms Atoms、Molecuresを組み合わせたコンポーネント ナビゲーションバーなど Organisms の margin戦略

    自身のmarginを持つ(ホントに? ) 子コンポーネントに対してmarginを指定する(ホントに? )
  4. 2.1. margin戦略の疑問 - Molecules Moleculesは子コンポーネントに対してmarginを指定する?! <Button> <Icon /> <Text />

    </Button> Button > * + * { margin-left: 1em; } 本当に <Text /> に margin-left の責務を持たせていいの? 複数、Icon/Text以外の要素が <Button /> 内に入れられたらどうするの?
  5. 2.2. margin戦略の疑問 - Organisms Organismsは自身のmarginを持つ?! Organismsは子コンポーネントに対してmarginを指定する?! <Navbar> <Logo /> <ButtonGroup

    /> <Account /> </Navbar> Navbar { // 自身のmargin margin-bottom: 32px; // 子コンポーネントに対してのmargin Logo { margin-right: 64px; } ButtonGroup { margin-right: 32px; } } 本当に <Logo /> や <ButtonGroup /> に margin-right をもたせていいの?
  6. 3. 従来型 <Navbar> <Logo /> <ButtonGroup /> <Account /> </Navbar>

    Navbar { margin-bottom: 32px; Logo { margin-right: 64px; } ButtonGroup { margin-right: 32px; } } Pros シンプル レイアウトのためだけの無意味な要 素が増えない Cons margin-left / marigin-right どっち使 うか問題が発生する margin相殺が発生する可能性が高い marginをコンポーネントの責務として持た せる必要性を疑う
  7. 4. Spacerコンポーネント margin専用のコンポーネント <Navbar> <Logo /> <Spacer x="64px" /> <ButtonGroup

    /> <Spacer x="32px" /> <Account /> </Navbar> <Spacer y="32px" /> Navbar { /* none */}
  8. 5. Stackコンポーネント 等間隔に並べるためのコンポーネント <Stack axis="column" gap="24px"> <Button /> <Button />

    <Button /> </Stack> // JSで設定する Stack { display: flex; flex-direction: column; gap: 24px; }
  9. 5. Stackコンポーネント Pros 不要な要素を作成しなくてよい CSSを触らなくても柔軟にmarginを調整 できる 導入、切り戻しコストはそれほど高くな い Cons DOM

    Treeが1階層深くなる 一定の間隔でしか指定できない 異なるコンテキストのボタンが並ぶ場 合に複数のStackが必要になる flex-gapを使うので古いブラウザで使え ない