drago.cc

Components shouldn't contain surrounding white space.

Components should be able to be used in any context. You shouldn't need to remove or adjust the surrounding white space every time you use a component. Doing so diminishes some of utility of having a design system. The goal of which should be to allow you to write as little CSS as possible.

Unfortunately, text elements in browsers break this rule since they place text in the middle of the box formed from the text's line height, always resulting in white space above and below each line of text. Tools like Capsize can help with this by cropping the white space above and below each text element.

Once you've removed white space from your components, control the "gap" between them by using a parent "layout" component.

I highly recommend watching this talk from ReactConf AU by Mark Dalgleish to learn more about this concept.