ReactでのComponentのStyle
ReactでCSSやるときに気をつけること
Component分割とCSSの共存をいかにやるか
Componentの分割仕方が、パフォーマンスと密接するようになってしまった
ここにかくことではないかもな
見出し&コンテンツの、Componentの分割の仕方も悩み
code:ts
<Section>
<H2>こんにちは</H2>
<P>こんにちは、おはようおはよう、こんばんわ</P>
</Section>
<Section>
...
</Section>
↑全く同じ文章で、この塊を再利用したいことがある
このときのComponentの分割の仕方が難しい
同じレイアウトだが、特殊対応しているときなど
案
<Section>...</Section>をまるごと分ける
cons: Section, H2, Pのstyleが散らばってしまう
このfeature専用のSection, H2, Pを定義して、それを再利用する
まあこれかな、という感じはするmrsekut.icon
pbfになっていればうまく機能しそう
Reactでchildrenでなんかをだしたいとき
<P>{children}</P>
このときのPのサイズって、「子のサイズによって決まる」べきってこともあるんだよな
例えばModalとか
<Modal></Modal>自体はサイズのことは知らなくて良い
子のサイズによって決まってくれればいい
これはこれで微妙だなmrsekut.icon
そうなるとchilden自体は絶対値指定しないといけなくなる
となると、そのchildrenに相当するComponentは使用する場所が固定されるということを意味してしまう
となると、やはりModal自体にheigt/width的なpropsをもたせるなりして、親で指定すべき、という気がする
Component内で適当にh4とかに定めると使われるケースによっては不適切になる
解決策として、使われている箇所のHのlevelを取得して自動でincrementする<H>を作るなどする
Componentの責務を意識する
Interfaceはその責務を明確にする役割を持つ
classNameをpropsに持ち、外部からstyleを変更できるようにするのは、そのやり方としてかなり難易度が高いので、やるべきでない
結果的に保守性の低下に繋がる
正しいっちゃ正しいのだが、難しいのでやるべきでない、という感じmrsekut.icon
「どんなスタイルが来ても対応できます！」を実行できるような内部実装でないといけなくなる
パターンどんだけ多いねん、になる
classNameのような抽象的なInterfaceを取るのではなく、colorなどの具体的なInterfaceを定義したほうが良い
そうすれば、「このComponentは、色の表示の仕方も責務に持つ」ということが明確になる
classNameやstyleは公開すべきではない
どうしても必要な場合は代わりに、UNSAFE_classNameを公開するなど
これ、責務の決め方にも依るよなあ、と最近思ってるmrsekut.icon
headless uiのように、機能に全振りしたものであれば、classNameを公開することが前提になる
大枠の装飾だけの目的でならclassName公開しても良い気もする
内部を触ってこないなら大丈夫、という場合は多そう
レイアウトに関するスタイルは一箇所で書くようにする
ペアになるようなスタイル
code:display:flec.js
const StyledWrapper = styled.div`
display: flex;
& > .hoge {
flex: 〇〇;
}
`;
positionのrelative/absoluteとかも？
レイアウトに関するHTMLタグは一箇所で書く
上のやつのHTML版
例
thとtd
liとdtとdd