TILs, snippets—my digital code garden 🌱.

All notes 11ty a11y ai animation api backend cheatsheet cli computer-science cpp css cypress deno dev devops git golang graphql html interview javascript messaging networking node performance php python questions react rust services sql storybook svelte sveltekit testing typescript typography vscode

💄CSS Object styles

react css javascript

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.

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',
}