Layout-Isolated Components

It isn't entirely true that padding is safe in terms of layout isolation.

@media queries based on browser width are especially bad. Unfortunately there is no css way for stylings dependent on the width of the _component_ itself.

So.... non-responsive?

Or, “Object-oriented”

Remember when we were building our apps as a set of screens and pages instead of thinking in components?

Sure, but I also remember building web apps in GWT, using a toolkit of reusable widgets, with an OO interface.

Edit to add: I guess I’m more agreeing with the author than arguing with them; I just find it amusing how what goes around comes around.

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.