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

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

ダーシノ
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. コンポーネント指向時代の
    margin戦略

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 2. margin戦略の疑問

    View full-size slide

  9. 2.1. margin戦略の疑問 - Molecules
    Moleculesは子コンポーネントに対してmarginを指定する?!








    Button > * + * {

    margin-left: 1em;

    }

    本当に
    に margin-left
    の責務を持たせていいの?
    複数、Icon/Text以外の要素が
    内に入れられたらどうするの?

    View full-size 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 full-size slide

  11. 3. 従来型










    Navbar {

    margin-bottom: 32px;

    Logo { margin-right: 64px; }

    ButtonGroup { margin-right: 32px; }

    }

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

    View full-size slide

  12. 4. Spacerコンポーネント
    margin専用のコンポーネント
















    Navbar { /* none */}

    View full-size slide

  13. 4. Spacerコンポーネント
    Pros
    責務が明確
    CSSを触らなくても柔軟にmarginを調
    整できる
    Cons
    marginと共存させるなら別途ルールが必

    基本的には共存させない
    margin用の要素がDOM Treeに大量に登
    録される
    導入、切り戻しコストが高い

    View full-size slide

  14. 5. Stackコンポーネント
    等間隔に並べるためのコンポーネント










    // JSで設定する

    Stack {

    display: flex;

    flex-direction: column;

    gap: 24px;

    }

    View full-size slide

  15. 5. Stackコンポーネント
    Pros
    不要な要素を作成しなくてよい
    CSSを触らなくても柔軟にmarginを調整
    できる
    導入、切り戻しコストはそれほど高くな

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

    View full-size slide

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

    View full-size slide