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

社内勉強会用

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

Transcript

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

   View Slide

2. TL;DR
   結論はだせない（場合による）
   宗教戦争になる
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 2. margin戦略の疑問
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide