Sources of custom CSS

• Typography
• Whitespace

Variables can help with consistency

But

• More writing and thinking
• Hard to ensure correct usage
• May be hard to update

Typography

<Text>

<div>
  <Header level={2}>Saluki</Header>
  <Text>
    The Saluki is classed as a sighthound
    and is typically deep-chested and long-legged.
    Salukis are “sight” hounds—hunting by sight—and
    run their quarry down to kill or retrieve it.
  </Text>
  <Text small>Don’t leave any food on a
    table when saluki is around.</Text>
</div>

Whitespace

• Paddings inside components
• Glue components together

Nathan Curtis’ framework

React Spaceman

• 8px grid
• xxs (2px) to xxl (128px)
• geometric progression

github.com/sapegin/react-spaceman

React Spaceman

<Panel
  below="xxs|xs|s|m|l|xl|xxl"
  inset="xxs|xs|s|m|l|xl|xxl"
  x="xxs|xs|s|m|l|xl|xxl"
  y="xxs|xs|s|m|l|xl|xxl"
  between="xxs|xs|s|m|l|xl|xxl"
  squish
  inline
>...</Panel>

Space inside components

import Panel from 'react-spaceman'
const Button = props => (
  <Panel
    inset="m"
    squish
    tag="button"
    className={classes.root}
    tagProps={props}
  >
    {props.children}
  </Panel>
)

Glue components together

Glue components together

<Panel inset="m" between="m">
  <Panel between="s">
    <h3>Saluki</h3>
    <div>The Saluki is classed as a…</div>
  </Panel>
  <Panel between="s" inline>
    <Tag href="/sighthounds">Sighthounds</Tag>
    <Tag href="/dogs">Dogs</Tag>
  </Panel>
  <Button>Buy a puppy</Button>
</Panel>

Components

• Limited freedom → consistency
• Avoid custom CSS for many components
• Easier code reviews
• Easier to document
• TypeScript and Flow

Thank you and use components

Slides: bit.ly/consistent-css
Me: sapegin.me
Twitter: @iamsapegin
GitHub: sapegin

Image credits

• Max Stoiber
• Priyanka Godbole
• Nathan Curtis