Coding better CSS

Be semantic

It is bad when you use selectors that doesn't mean anything in your code, it makes your code messier, difficult to mantain and hard to see where you can reuse.

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

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

Merge same rules

If you see that the same rules are being applied to different selectors, search for a way that you can merge these two selectors.

// 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;
}

Find a standard structuring way for your css properties

I found a couple days a go in an article a good way to structure my CSS rules inside a selector, feel free to comment if you think there is a better way.

.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;
}

(copied from Idiomatic CSS)