CSS Object styles

Instead of writing css properties in kebab-case like regular css, you write them in camelCase, for example background-color would be backgroundColor. Object styles are especially useful with the css prop because you don’t need a css call like with string styles but object styles can also be used with styled.

• theme-ui.com/guides/...-styles
• emotion.sh/docs/obj...t-styles

Pseudo elements

{
  "&::before": {
    content: '""',
    display: 'block',
    width: 32,
    height: 32,
    backgroundColor: 'tomato',
  }
}

Media queries

{
  color: 'darkorchid',
  '@media(min-width: 420px)': {
    color: 'orange'
  }
}

Numbers

{
  padding: 8,
  zIndex: 200
}

Vendor prefixes

From MDN:

Prefixes for interface names are upper-cased:

• WebKit (Chrome, Safari, newer versions of Opera, almost all iOS browsers (including Firefox for iOS); basically, any WebKit based browser)
• Moz (Firefox)
• O (Older, pre-WebKit, versions of Opera)
• MS (Internet Explorer and Microsoft Edge)

{
  MozTextStrokeColor: 'red,
  WebkitTextStrokeColor: 'red',
  textStrokeColor: 'red,
  MozTextStrokeWidth: '1px',
  WebkitTextStrokeWidth: '1px',
  textStrokeWidth: '1px',
}