//bad

.alfred {
  min-width: 80px;
  color: red;
  float: left;
  width: 80px;
  min-height: 220px;
  height: 220px;
}


.robin {
  padding-left: 5px;
  width: 168px;
  margin: 0;
  float: left;
  color: $gray-nav;
  font-size: 0.9em;
  padding-right: 30px;
}

.batman {
  font-family: $primary-font;
  text-transform: uppercase;
  font-size: 1.1em;
  margin-bottom: 5px;
  color: black;
  height: 50px;
}

//example

diplay-properties
   float
   display
   overflow
   etc
 
size-properties
   width
   height
   padding
   margin
   etc

colors
   background
   border
   color
   etc

fonts
   font-size
   font-weight
   text-transform
   etc

css3 stuff
   gradients
   box-shdow
   gradients
   etc

others

position
   z-index
   position
    top
    left

//bad

#captainplanet {
  ...
}

//good

.captainplanet {
  ...
}

//example

#header a {
  color: green;
}

nav a {
  color: red;
}

//bad

a {
  color: red !important;
}

.header a {
  color: blue !important;
}

.header .widget--discount a {
  color: red !important;
}

//weird, but better

a {
  color: red;
}

.header a {
  color: blue;
}

.header .widget--discount a {
  color: red;
}

//bad

.gadgets ul {
  ...
}

label {
  ...
}

//good

.listing-gadgets {
  ...
}

.label {
  ...
}

//bad

.cave {
  ...

  .batcar {
    ...
    
    .robin {
      ...
    }
  }
}

//good

.cave {
  ...
}

.batcar {
  ...
}

.robin {
  ...
}      

//bad

.white-block {
  background-color: white;
}

.margin-10 {
  margin: 10px;
}

//good

.block-thing {
  ...
}

.block-thing--space {
  margin: 10px;
}

//because

.white-block {
  background-color: yellow;
}

.margin-10 {
  margin: 15px;
}

//basics

.block {}

.block__element {}

.block--modifier {}


//example

.list-orders {}

.list-orders__item {}

.list-orders__item--discount {}

.shera {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

//bad

$primary: #000;
$secondary: #fff;

$main-color: #ccc;
$secondary-color: #eee;

$margin-size-1: 10px;
$margin-size-2: 20px;
$margin-size-3: 30px;
$margin-size-4: 40px;

//good

$black: #000;
$white: #fff;

$brand-primary: $black;
$brand-secondary: $white;

$default-spacing: 20px;
$default-radius: 5px;

//bad

.button {
   ...
}

.button--default {
   @extends .button;
   
   color: $grey;
}

.button--special {
   @extends .button;

   color: $yellow;
}

//good

%button {
   ...
}

.button--default {
   @extends %button;
   
   color: $grey;
}

.button--special {
   @extends %button;

   color: $yellow;
}