Slide 1

Slide 1 text

コンポーネント指向時代の margin戦略

Slide 2

Slide 2 text

TL;DR 結論はだせない(場合による) 宗教戦争になる

Slide 3

Slide 3 text

TOC 1. コンポーネント設計とmargin戦略 2. margin戦略の疑問 3. 従来型 4. Spacerコンポーネント 5. Stackコンポーネント 6. まとめ

Slide 4

Slide 4 text

1. コンポーネント設計とmargin戦略

Slide 5

Slide 5 text

1.1. コンポーネント設計とmargin戦略 - Atoms Atoms UIパーツの最小単位のコンポーネント ラベル、テキスト、アイコン、ボタンなど Atoms の margin戦略 marginは持たない(わかる ) まわりのコンポーネントに影響を与えるため marginの相殺 marginの上書き

Slide 6

Slide 6 text

1.2. コンポーネント指向とmargin戦略 - Molecules Molecules Atomsを組み合わせたコンポーネント 入力フォームなど Molecules の margin戦略 自身のmarginは持たない(わかる ) 子コンポーネントに対してmarginを指定する(ホントに? )

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

2. margin戦略の疑問

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

2.2. margin戦略の疑問 - Organisms Organismsは自身のmarginを持つ?! Organismsは子コンポーネントに対してmarginを指定する?! Navbar { // 自身のmargin margin-bottom: 32px; // 子コンポーネントに対してのmargin Logo { margin-right: 64px; } ButtonGroup { margin-right: 32px; } } 本当に や に margin-right をもたせていいの?

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

4. Spacerコンポーネント margin専用のコンポーネント Navbar { /* none */}

Slide 13

Slide 13 text

4. Spacerコンポーネント Pros 責務が明確 CSSを触らなくても柔軟にmarginを調 整できる Cons marginと共存させるなら別途ルールが必 要 基本的には共存させない margin用の要素がDOM Treeに大量に登 録される 導入、切り戻しコストが高い

Slide 14

Slide 14 text

5. Stackコンポーネント 等間隔に並べるためのコンポーネント // JSで設定する Stack { display: flex; flex-direction: column; gap: 24px; }

Slide 15

Slide 15 text

5. Stackコンポーネント Pros 不要な要素を作成しなくてよい CSSを触らなくても柔軟にmarginを調整 できる 導入、切り戻しコストはそれほど高くな い Cons DOM Treeが1階層深くなる 一定の間隔でしか指定できない 異なるコンテキストのボタンが並ぶ場 合に複数のStackが必要になる flex-gapを使うので古いブラウザで使え ない

Slide 16

Slide 16 text

6. まとめ marginってなんだ? 考えすぎかも なにもわからない