Hi Chris,

great article, it’s always intriguing to see how other people tackle the problem of “spacing” in a UI library.

On our side (Badoo) we have decided to follow this approach for our component library/design system: every component has to be “neutral”, so no extra spacing around, never (no margin, no padding). Internally a component can express spacing between the elements that compose it, of course. This approach has lead us to two distinct kind of components: those that are “pure layout” (essentially, are used just to organise/space the content) and those that are “content + formatting” (and that usually fill the parent container/slot, unless they have a set of predefined and fixed sizes).

Whenever we see a component that shows hybrid traits, it’s a small that we should break it down in at least two components, a container/layout one + a content&formatting one.

In the case of your example, we would have introduced a <GithubSidebarProfile/> component, whose only responsibility is to have inner “slots” (imagine `<div className=”github-sidebar-profile__user-image”/>`, `<div className=”github-sidebar-profile__user-name-heading”/>` and so on) in which add the sub-components, that are as I said before spatially neutral.

I know it may look an overkill/overengineering but actually is working quite well for us, it’s so much cleaner and clearer (who’s responsible for the “spacing” is always easy to find and update).

My 2 cents.

Thank you again!