UIコンポーネントの大きさは外から制御しよう - Qiita

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P

[kituneudon97]

propsで大きさを変更するCSSを受け取るのではなく、大きさは親要素いっぱいになるようにする。最近はwidth・heightではなくinline-size、block-sizeというサイズの指定方法が登場している

[kiririmode]

コンポーネントのボックスがブロックレベルボックスなのであれば、コンポーネントのボックスが親から伸ばされることを前提に設計する

[habarhaba]

CSSのボックスモデルを最大限活用することに同意

[yarumato]

“Cardコンポーネントのwidth指定で望ましい方法は、親要素の横幅で制御。つまり、親のdiv要素を250pxに制限することで、Card要素のwidthを100%にすれば250pxまでしか広がらない。heightを100%に伸ばすには親をgridレイアウトに”

[jay-es]

コンポーネントのサイズを指定するための props を作らない。`width: number` などだと表現力が足りない。親要素でサイズを調整する。grid なら子要素の高さも制御できる