[lewisl9029]

While I agree with all of the problem statements in this article, I don't quite agree with the proposed solution of just exposing style props for parents to pass through arbitrary values, at least not as a general solution (it could still be the appropriate solution for certain special cases).

I think this approach actually results in _less_ useful component isolation in that you can no longer reason about layout of the component _itself_ in isolation, because it can be much more difficult, sometimes impossible, to predict how the styles in the component itself will interact with the styles passed through by the parent.

Instead, I'd recommend always using plain block elements with no explicit height/width/flex properties for the outermost bounding box of your reusable components, so parents can _indirectly_ control how they're laid out using flexbox/grid and add containers that constrain the available space for them to render in and add flex properties if necessary.

Totally agree with the suggestion of using spacing components over margin though. We called this the "golden rule of components" in that reusable components should be entirely responsible for rendering everything within its outermost bounding box (outside of delegating certain parts/properties of it through explicit APIs), and should render nothing outside of it (including empty space, i.e. margins). Of course, edge cases exist where it's necessary to break away from this guideline, but I feel it's a great general rule of thumb for creating flexible reusable components.

[iainmerrick]

reusable components [...] should render nothing outside of it (including empty space, i.e. margins).

Could collapsing margins be an exception to this rule, in principle?

I’ve mostly worked in Android, iOS and React Native, none of which have collapsing margins. But I’ve often wished they had, as it would make some layouts a lot simpler! It would be great to just smoosh components together and have them agree between themselves how much space is needed.

HTML has collapsing margins but they seem kind of half-baked. Is there enough functionality there to be useful, or is it best avoided entirely?

[lewisl9029]

> HTML has collapsing margins but they seem kind of half-baked. Is there enough functionality there to be useful, or is it best avoided entirely?

Generally I'd recommend avoiding them entirely, as the rules for when margins should collapse are nuanced and sometimes applied inconsistently between browsers.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Mod...

It just adds too much cognitive overhead to reasoning about your layouts to be worthwhile imo. Whereas with spacing components, what you see in the virtual dom is what you'll get.

[emilsjolander]

OP here. Totally agree passing arbitrary styles down in props is not a great solution and makes to incredibly hard to reason about components. We defined explicitly using typescript the styles which can be set from the parent which makes it much easier to reason about and we can even use the "find all references" feature of VSCode to identify usages.