What is that?

蛤，那啥？

父

子

以實際例子來看...

What matters?

看起來大家都知道，有什麼重要的嗎？

“ 你的孩子會是別人的父親 ”

作為子元素的樣式和作為父元素的樣式混在一起了

central issue

回到實際例子

直覺的想法：

可能發生的問題

今天 header 想拿出去用，可是 margin 卻寫死了

可能發生的問題

filter 裡面做了 5 個 component 之後，發現爆版，要在 5 個 component 和 filter 之間來回調整

可能發生的問題

ListWrapper 為了重複使用，開了幾個洞來丟樣式。今天要修改設計，卻找不到要改哪一支 props

Possible Solution

改善的方式

改善的方式

1. 將子元素獨立出來
2. 在同一支檔案裡面看得到父子關係

改善的方式

不同樣式的關注點可以分開來

改善的方式 其之二

在同一個 component 中有多層父子關係 / layout

• 將樣式分開成獨立的 props

改善的方式 其之二

• 從變數名稱看得出來不同層的父子關係
• props 中看得出來這個 tag 跟誰有關係 

回到案例

回到案例

Tricky Thing ...

這兩層不也是父子關係嗎？

In conclution

總結來說

清楚的父子關係可以縮小檢視的檔案數量

clear focal point

清楚的父子關係可以減少樣式互相牽連的狀況

less coupling

清楚的父子關係可以讓模組更容易鑲嵌

higher reusability