Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コンポーネント指向時代のmargin戦略 / Rethinking the relations...
Search
ダーシノ
September 06, 2021
Programming
1
1.2k
コンポーネント指向時代のmargin戦略 / Rethinking the relationship between Components and Margins
社内勉強会用
コンポーネントにmarginを持たせて良いのか、Spacer/Stackコンポーネントは有用なのか、比較検討する
ダーシノ
September 06, 2021
Tweet
Share
More Decks by ダーシノ
See All by ダーシノ
存在感が薄い?!意外とがんばってるさくらインターネットFEチーム / Frontend Conference 2024
bcrikko
1
4k
フロントエンドの複雑さに立ち向かう / Tackling Complexity of Front-end Software with DDD and Clean Architecture
bcrikko
19
15k
社内勉強会やっていきガイド / Tips for Sustainable Study Groups
bcrikko
4
2k
加速するコンポーネント設計入門 / Component Design as an Accelerator
bcrikko
9
6.6k
自分がやった設計反省会 / Evaluation of my Architecture
bcrikko
0
470
知ってトクするDevToolsの使い方 / DevTools Tips you should know
bcrikko
1
530
伝わるバグ報告 / How to write a better bug report
bcrikko
2
680
Sassの新しいモジュールシステム / Introducing New Sass Module System
bcrikko
0
660
決断力を消耗しないSass開発環境構築 / Set up Sass development environment
bcrikko
0
540
Other Decks in Programming
See All in Programming
DevDay2025-OracleDatabase-kernel-addressing-history
oracle4engineer
PRO
7
1.6k
External SecretsのさくらProvider初期実装を担当しています
logica0419
0
240
がんばりすぎないコーディングルール運用術
tsukakei
1
180
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
ワンバイナリWebサービスのススメ
mackee
10
7.5k
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
310
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
19
6.7k
Doma で目指す ORM 最適解
nakamura_to
1
160
MLOps Japan 勉強会 #52 - 特徴量を言語を越えて一貫して管理する, 『特徴量ドリブン』な MLOps の実現への試み
taniiicom
2
570
TypeScript だけを書いて Tauri でデスクトップアプリを作ろう / Tauri with only TypeScript
tris5572
2
530
Javaのルールをねじ曲げろ!禁断の操作とその代償から学ぶメタプログラミング入門 / A Guide to Metaprogramming: Lessons from Forbidden Techniques and Their Price
nrslib
1
160
Feature Flag 自動お掃除のための TypeScript プログラム変換
azrsh
PRO
4
630
Featured
See All Featured
It's Worth the Effort
3n
184
28k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why Our Code Smells
bkeepers
PRO
336
57k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Bash Introduction
62gerente
614
210k
Making Projects Easy
brettharned
116
6.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Product Roadmaps are Hard
iamctodd
PRO
53
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
106
19k
A better future with KSS
kneath
239
17k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Transcript
コンポーネント指向時代の margin戦略
TL;DR 結論はだせない(場合による) 宗教戦争になる
TOC 1. コンポーネント設計とmargin戦略 2. margin戦略の疑問 3. 従来型 4. Spacerコンポーネント 5.
Stackコンポーネント 6. まとめ
1. コンポーネント設計とmargin戦略
1.1. コンポーネント設計とmargin戦略 - Atoms Atoms UIパーツの最小単位のコンポーネント ラベル、テキスト、アイコン、ボタンなど Atoms の margin戦略
marginは持たない(わかる ) まわりのコンポーネントに影響を与えるため marginの相殺 marginの上書き
1.2. コンポーネント指向とmargin戦略 - Molecules Molecules Atomsを組み合わせたコンポーネント 入力フォームなど Molecules の margin戦略
自身のmarginは持たない(わかる ) 子コンポーネントに対してmarginを指定する(ホントに? )
1.3. コンポーネント指向とmargin戦略 - Organisms Organisms Atoms、Molecuresを組み合わせたコンポーネント ナビゲーションバーなど Organisms の margin戦略
自身のmarginを持つ(ホントに? ) 子コンポーネントに対してmarginを指定する(ホントに? )
2. margin戦略の疑問
2.1. margin戦略の疑問 - Molecules Moleculesは子コンポーネントに対してmarginを指定する?! <Button> <Icon /> <Text />
</Button> Button > * + * { margin-left: 1em; } 本当に <Text /> に margin-left の責務を持たせていいの? 複数、Icon/Text以外の要素が <Button /> 内に入れられたらどうするの?
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 をもたせていいの?
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をコンポーネントの責務として持た せる必要性を疑う
4. Spacerコンポーネント margin専用のコンポーネント <Navbar> <Logo /> <Spacer x="64px" /> <ButtonGroup
/> <Spacer x="32px" /> <Account /> </Navbar> <Spacer y="32px" /> Navbar { /* none */}
4. Spacerコンポーネント Pros 責務が明確 CSSを触らなくても柔軟にmarginを調 整できる Cons marginと共存させるなら別途ルールが必 要 基本的には共存させない
margin用の要素がDOM Treeに大量に登 録される 導入、切り戻しコストが高い
5. Stackコンポーネント 等間隔に並べるためのコンポーネント <Stack axis="column" gap="24px"> <Button /> <Button />
<Button /> </Stack> // JSで設定する Stack { display: flex; flex-direction: column; gap: 24px; }
5. Stackコンポーネント Pros 不要な要素を作成しなくてよい CSSを触らなくても柔軟にmarginを調整 できる 導入、切り戻しコストはそれほど高くな い Cons DOM
Treeが1階層深くなる 一定の間隔でしか指定できない 異なるコンテキストのボタンが並ぶ場 合に複数のStackが必要になる flex-gapを使うので古いブラウザで使え ない
6. まとめ marginってなんだ? 考えすぎかも なにもわからない