コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話は無視して完全一致させる。そういう星のもとで開発している コンポーネントの分類 ロジックコンポーネント レイアウトコンポーネント ブロックコンポーネント インラインコンポーネント 定義 ロジックコンポーネント Provider や hooks などのデータ処理だけを扱い、子に渡すコンポーネント 一切の CSS や DOM 実体を持たない レイアウトコンポーネント レイアウトコンポーネントは複数の子ブロックコンポーネント(または slot)を持ち、子ブ

[repon]

css無しロジックのみコンポーネント→ガワのコンポーネント→ ブロックコンポーネント & インラインコンポーネント なるほど……

[d4-1977]

FLOCSSに似ている気がします。FigmaてAutoLayout使うときもこんな感じ。だから、相性はいいと思うんだけれど、関係者全員が理解しておかないと上手くいかない気はしています

[shimarisugi]

SSGされるコンテンツをlayoutコンポーネントでwrapする慣習がgatsbyにあってそのときに似たことやってたなぁcontainer queryが登場した今はメニューの開閉やレスポンシブ対応をヘッドレスコンポーネントとして作るのも良さそう

[onesplat]

昨今のフロントエンドの連中は昔ながらのコンポーネントベースのUIの作り方を再発明しているな。それ30年くらい前からあるよ。Web以外では。

[umai_bow]

ブロックコンポーネントとレイアウトコンポーネントを区別する意味があまり無さそう（1x1のレイアウトがブロックでは）

[razokulover]

これ見て思ったけどFlutterでの開発は基本ここでいうようなベースコンポーネントが一通り揃っていてそれを入れ子にして組み合わせて開発する流れだから似てるなと思った

[mizdra]

なるほどー

[mayumayu_nimolove]

tailwind楽だよ

[mizchi]

書いた