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 . 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.

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 )