Sensible css global defaults for the next project

global.js

import { createGlobalStyle } from 'styled-components'
import 'normalize.css'

export const Global = createGlobalStyle`
  body,
  html {
    box-sizing: border-box;
    overflow-x: hidden;
  }

  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  *,
  *:before,
  *:after {
    box-sizing: inherit;
    font-family: ${({ theme }) => theme.fonts.sansSerif};
  }

  /* happy rems. 1rem === 10px */

  html {
    font-size: 62.5%;
  }

  body {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
  }

  /* button reset */
  /* https://gist.github.com/MoOx/9137295 */
  button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;

    background: transparent;

    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;

    /* Normalize line-height. Cannot be changed from normal in Firefox 4+. */
    line-height: normal;

    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;

    /* Corrects inability to style clickable input types in iOS */
    -webkit-appearance: none;
  }

  /* Remove excess padding and border in Firefox 4+ */
  button::-moz-focus-inner {
      border: 0;
      padding: 0;
  }
`