社内勉強会用
コンポーネントにmarginを持たせて良いのか、Spacer/Stackコンポーネントは有用なのか、比較検討する
コンポーネント指向時代のmargin戦略
View Slide
TL;DR結論はだせない(場合による)宗教戦争になる
TOC1. コンポーネント設計とmargin戦略2. margin戦略の疑問3. 従来型4. Spacerコンポーネント5. Stackコンポーネント6. まとめ
1. コンポーネント設計とmargin戦略
1.1. コンポーネント設計とmargin戦略 - AtomsAtomsUIパーツの最小単位のコンポーネントラベル、テキスト、アイコン、ボタンなどAtoms の margin戦略marginは持たない(わかる )まわりのコンポーネントに影響を与えるためmarginの相殺marginの上書き
1.2. コンポーネント指向とmargin戦略 - MoleculesMoleculesAtomsを組み合わせたコンポーネント入力フォームなどMolecules の margin戦略自身のmarginは持たない(わかる )子コンポーネントに対してmarginを指定する(ホントに? )
1.3. コンポーネント指向とmargin戦略 - OrganismsOrganismsAtoms、Molecuresを組み合わせたコンポーネントナビゲーションバーなどOrganisms の margin戦略自身のmarginを持つ(ホントに? )子コンポーネントに対してmarginを指定する(ホントに? )
2. margin戦略の疑問
2.1. margin戦略の疑問 - MoleculesMoleculesは子コンポーネントに対してmarginを指定する?!Button > * + * {margin-left: 1em;}本当に に margin-leftの責務を持たせていいの?複数、Icon/Text以外の要素が 内に入れられたらどうするの?
2.2. margin戦略の疑問 - OrganismsOrganismsは自身のmarginを持つ?!Organismsは子コンポーネントに対してmarginを指定する?!Navbar {// 自身のmarginmargin-bottom: 32px;// 子コンポーネントに対してのmarginLogo { margin-right: 64px; }ButtonGroup { margin-right: 32px; }}本当に や に margin-rightをもたせていいの?
3. 従来型Navbar {margin-bottom: 32px;Logo { margin-right: 64px; }ButtonGroup { margin-right: 32px; }}Prosシンプルレイアウトのためだけの無意味な要素が増えないConsmargin-left/ marigin-rightどっち使うか問題が発生するmargin相殺が発生する可能性が高いmarginをコンポーネントの責務として持たせる必要性を疑う
4. Spacerコンポーネントmargin専用のコンポーネントNavbar { /* none */}
4. SpacerコンポーネントPros責務が明確CSSを触らなくても柔軟にmarginを調整できるConsmarginと共存させるなら別途ルールが必要基本的には共存させないmargin用の要素がDOM Treeに大量に登録される導入、切り戻しコストが高い
5. Stackコンポーネント等間隔に並べるためのコンポーネント// JSで設定するStack {display: flex;flex-direction: column;gap: 24px;}
5. StackコンポーネントPros不要な要素を作成しなくてよいCSSを触らなくても柔軟にmarginを調整できる導入、切り戻しコストはそれほど高くないConsDOM Treeが1階層深くなる一定の間隔でしか指定できない異なるコンテキストのボタンが並ぶ場合に複数のStackが必要になるflex-gapを使うので古いブラウザで使えない
6. まとめmarginってなんだ?考えすぎかもなにもわからない