Codificando melhor CSS

Seja semântico

É ruim quando você usa seletores que não significam nada em seu código, isso torna seu código mais confuso, difícil de manter e difícil de ver onde você pode reutilizar.

// bad
.dummy-class {
    position: relative;
    top: 15px;
}

// good
.article {
    position: relative;
    top: 15px;
}

Mesclar as mesmas regras

Se você vir que as mesmas regras estão sendo aplicadas a seletores diferentes, procure uma maneira de mesclar esses dois seletores.

// bad
#header.green {
   background-color: green;
   font-size: 12px;
   margin: 20px;
}

#header.red {
   background-color: red;
   font-size: 12px;
   margin: 20px;
}

// good
#header {
   font-size: 12px;
   margin: 20px;
}

.green {
   background-color: green;
}

.red {
   background-color: red;
}

Encontre uma forma de estruturação padrão para suas propriedades css

Descobri alguns dias em um artigo uma boa maneira de estruturar minhas regras CSS dentro de um seletor, fique à vontade para comentar se você achar que existe uma maneira melhor.

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

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff

  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}

(copiado do CSS idiomático )