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!

Written by

Passionate web designer & developer. In love with Atomic Design, Design Systems & CSS architecture. Attendee/speaker/organiser of tech conferences and meetups.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store