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