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
990
コンポーネント指向時代の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
3k
フロントエンドの複雑さに立ち向かう / Tackling Complexity of Front-end Software with DDD and Clean Architecture
bcrikko
18
11k
社内勉強会やっていきガイド / Tips for Sustainable Study Groups
bcrikko
4
1.9k
加速するコンポーネント設計入門 / Component Design as an Accelerator
bcrikko
9
6.1k
自分がやった設計反省会 / Evaluation of my Architecture
bcrikko
0
370
知ってトクするDevToolsの使い方 / DevTools Tips you should know
bcrikko
1
460
伝わるバグ報告 / How to write a better bug report
bcrikko
2
610
Sassの新しいモジュールシステム / Introducing New Sass Module System
bcrikko
0
580
決断力を消耗しないSass開発環境構築 / Set up Sass development environment
bcrikko
0
480
Other Decks in Programming
See All in Programming
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
『ドメイン駆動設計をはじめよう』中核の業務領域
masuda220
PRO
5
970
労務ドメインを快適に開発する方法 / How to Comfortably Develop in the Labor Domain
yuki21
1
250
サーバーレスで負荷試験!Step Functions + Lambdaを使ったk6の分散実行
shuntakahashi
6
1.5k
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
160
Method Swizzlingを行うライブラリにおけるマルチモジュール設計
yoshikma
0
110
AndroidアプリのUIバリエーションをあの手この手で確認する / Check UI variations of Android apps by various means
tkmnzm
1
130
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
260
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
380
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
530
Swiftコードバトル必勝法
toshi0383
0
150
Go Code Generation at newmo / 2024-08-27 #newmo_layerx_go
genkey6
0
560
Featured
See All Featured
Thoughts on Productivity
jonyablonski
66
4.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
The Pragmatic Product Professional
lauravandoore
31
6.2k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Designing the Hi-DPI Web
ddemaree
278
34k
The Cult of Friendly URLs
andyhume
76
6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Why Our Code Smells
bkeepers
PRO
334
56k
Building a Modern Day E-commerce SEO Strategy
aleyda
36
6.8k
Typedesign – Prime Four
hannesfritz
39
2.3k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
354
29k
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ってなんだ? 考えすぎかも なにもわからない