CSS Ordering

To ensure consistency with our (S)?CSS rules, we have committed to following a convention for ordering those rules by type. When contributing, ensure your (S)?CSS rules follow this order where applicable.

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Display */
  display: inline-block;
  
  /* Background */
  background-image: url();
  background-size: contain;
  background-color: #000;
  
  /* Box-Model */
  width: 100px;
  height: 100px;
  margin: 3rem;
  padding: 1rem;
  box-sizing: border-box;
  border: 3px solid red;
  content: '';
  overflow: scroll;
  
  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0);
  cursor: pointer;
  color: #fff;
}