Might be useful for glamor... Or not... https://github.com/threepointone/glamor

index.js

const doSomething = () => {}

const S = (...args) => {
  const [ Component, css, defaultProps ] = 
    typeof args[0] === 'string' ? args : [ 'div', ...args ]
  return (props) => <Component css={css} {...defaultProps} {...props}/>
}

const Label = S('label', { display: 'block' })
const Block = S({ margin: '1rem 0' })
const Checkbox = S('input', { color: 'red' }, { type: 'checkbox' })

const Component = () => (
  <Block>
    Text with 
    <Label>
      <Checkbox onClick={doSomething}/>
      checkbox
    </Label>
  </Block>
)

// vs

const label = { display: 'block' }
const block = { margin: '1rem 0' }
const checkbox = { color: 'red' }

const Component = () => (
  <div css={block}>
    Text with 
    <label css={label}>
      <input css={checkbox} type="checkbox" onClick={doSomething}/> 
      checkbox
    </label>
  </div>
)