I made this CSS cheatsheet at my last job

useful-css.md

Fun CSS Stuff

Sanitze.css

Official Site and github repo

I like this base css sheet, has everything normalize has and some "opinionated" additions that I like, such as border-box by default.

<link
  href="https://unpkg.com/sanitize.css"
  rel="stylesheet"
/>

Utility classes

.font--something-something {
  font-family: 'Something-something', sans-serif;
}

.font-weight--bold {
  font-weight: 700;
}

.font-weight--black {
  font-weight: 900;
}

.font-color--white {
  color: #FFF;
}

.font--uppercase {
  text-transform: uppercase;
}

.text-align--center {
  text-align: center;
}

.width--100vw {
  width: 100vw;
}

.width--100percent {
  width: 100%;
}

.height--100percent {
  height: 100%;
}

.max-width--1200px {
  max-width: 1200px;
}

.margin--vertical-4px {
  margin: 4px 0;
}

.margin--vertical-8px {
  margin: 8px 0;
}

.margin--vertical-12px {
  margin: 12px 0;
}

.margin--vertical-16px {
  margin: 16px 0;
}

.margin--vertical-20px {
  margin: 20px 0;
}

.padding--4px {
  padding: 4px;
}

.padding--8px {
  padding: 8px;
}

.padding--12px {
  padding: 12px;
}

.padding--16px {
  padding: 16px;
}

.padding--20px {
  padding: 20px;
}

.flex--container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex--col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.flex--col-reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.flex--center-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center
}

.flex--align-items-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.display--none {
  display: none;
}

.position--relative {
  position: relative;
}

.position--absolute {
  position: absolute;
}

.size-proportionally--parent {
  position: relative;
}

.size-proportionally--child {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

Make them fonts POP

body {
  -webkit-font-smoothing: antialiased;
}

Fix Round corners in iOS

input, textarea {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
}

Media Query for IE Specific Styles

@media all and (-ms-high-contrast:none) {
  .blah {...}
}

Full-Width Containers

.container {
  width: 100vw;
  max-width: 1200px; /* or whatever you want! */
}