Use spacer components

# Do not allow arbitrary CSS to be passed into your components

When you allow arbitrary CSS to be passed into your component (e.g. accepting a `className` or `css` prop) you expose your internal DOM structure as a public API. Any changes you then make to your components JSX have to be considered breaking changes. Your component is now much harder to evolve.

Instead, limit the customisability where you can. Where necessary, add high-level toggles (e.g. `variant="primary"`), delegate to a global theme (theme-ui or [[strict-ui]]), or build “headless” components that only contain logic.

This also works well when you [[Use spacer components]], as you cannot be passing `m={5}` into all the components (which is less nice anyway).




strict-ui

# Layout in React

Even the most common of layouts are hard to achieve in a React web app. How many sidebar, tiles, column components have been created?

I played around with building a set of reusable layout components that would cover the 80-90% use case as part of [[strict-ui]] but did not get anywhere. Instead, I went with spacer components based on CSS Grid and Flexbox for now. (see [[Use spacer components]])

Some things I want to try out to see how they feel are:

- iOS’ Auto Layout: there is a JS implementation called [CassowaryJS](https://github.com/slightlyoff/cassowary.js/).
- [Every Layout](https://absolutely.every-layout.dev): a HTML & CSS patterns site that covers “absolutely every layout”.




Layout in React

Do not allow arbitrary CSS to be passed into your components

# Use spacer components
Instead of trying find a generic abstraction for [[Layout in React]], I think the easiest solution is to use a `<Flex />` and a `<Grid />` component that mostly mirror their CSS APIs, with one small addition: the `<Flex />` component [ponyfills](https://ponyfoo.com/articles/polyfills-or-ponyfills) `flex-gap` to allow for spacing defined from the parent ([Margin considered harmful](https://mxstbr.com/thoughts/margin)):

```
<Flex gap={3} justifyContent="column">
  {...items}
</Flex>
```

I find working with this component a pleasant experience, particularly when combined with [[strict-ui]]. 

A common response I get to [Margin considered harmful](https://mxstbr.com/thoughts/margin) is that they “just pass in margin via a `className` prop on the children”, however [[Do not allow arbitrary CSS to be passed into your components]].




About these notes

# strict-ui

An opinionated abstraction on top of CSS-in-JS that makes it simpler to build component-based systems.

*Overarching principle:* Components should only affect themselves but nothing around them.

Update: I have a  [working prototype of these ideas in a PR](https://github.com/system-ui/theme-ui/pull/719) . The next step is using it and seeing how it feels.

## Rules
Ordered roughly by controversiality:

1. No box-sizing. Always use border-box.
2. No inline images. All imgs are inline-block or block.
3. No float except for imgs. Use layout component (see [[Layout in React]]) from the parent instead.
4. No random values (padding: ‘17px’, color: ‘#fafbfc'), only tokens and scales from the theme (padding: 2, color: 'primary').
5. No flexbox properties (justify-content, align-items, etc). Use layout components instead.
6. No grid properties (grid-column, grid-template, etc). Use layout components instead.
7. No margin. See [Margin considered harmful](https://mxstbr.com/thoughts/margin).

Potential other ideas:

1. No display? Particularly flex and grid should instead be delegated to layout components, but what does that mean for block vs. inline? Probably still need those maybe?
2. No child or type pseudoselectors? (:nth-child, :nth-of-type, etc) What are they useful for that can'’ be done trivially in JS-land instead? Is it useful to disallow them?
3. No right / left properties? Instead only have start / end / horizontal / vertical which would work more easily with i18n and RTL languages.
4. What about z-index? Could limit to a certain number of steps
5. A full theme / scale interface (things like fonts.body are required)? Would help with the notion of swapping / interoperability
6. The text-spacing-hack included in Seek’’ design system Braid (see  [this talk](https://www.youtube.com/watch?v=jnV1u67_yVg) )




@mxstbr's working notes

Use spacer components

Links to this note

What do you think?