How I make blocks sexy with abstracted classes.

screen.scss

//
// Generic block styles
//

.block {
  @include margin-trailer(1);
}

.block-rounded {
  @media screen and (min-width: 420px) {
    @include border-radius(6px);
  }
  padding: 18px;
}

.block-shadow-inset {
  @include single-box-shadow($brown, 0, 0, 2px, 0px, true);
}

.block-white {
  background-color: $off-white;
  @extend .block-shadow-inset;
}

.block-brown {
  @include rgba-background(rgba($brown-light, 0.4));
  @extend .block-shadow-inset;
}

.block-brown-light {
  @include rgba-background(rgba($brown-light, 0.2));
  @extend .block-shadow-inset;
}

.block-title {
  margin-top: 0;
  @include adjust-leading-to(2, $font-size-xl)
}

.block-title-collapse {
  margin-bottom: 0;
}

//
// Fancy blocks
//

.block-fancy {
  @include rgba-background(rgba($brown-light, 0.2));

  &.block-rounded {
    padding: 0;
  }

  .content {
    @include clearfix;
    padding: 18px;
  }
}

.block-fancy-orange {
  .fancy-title {
    border-color: $orange;
  }

  em {
    color: $orange-light;
  }
}

.block-fancy-green {
  .fancy-title {
    border-color: $green;
  }

  em {
    color: $green-light;
  }
}

.fancy-title {
  @include rgba-background(rgba($brown-light, 0.6));
  @include trailing-border($base-line-height, 2, $font-size, solid);
  @include border-top-radius(6px);
  color: $off-white;
  $font-size: $fs-xxxl;
  @include adjust-font-size-to($font-size);
  @include adjust-leading-to(3, $font-size);
  margin: 0;
  @include padding-leader(1, $font-size);
  padding-left: 18px;
  padding-right: 18px;

  em {
    display: block;
    font-style: normal;
  }
}

template.php

<?

/**
 * Implements hook_preprocess_block()
 */

function shizzle_preprocess_block(&$vars) {
  /* Set shortcut variables. */ 
  $delta = $vars['block']->delta;
  $classes = &$vars['classes_array'];
  $title_classes = &$vars['title_attributes_array']['class'];
  #kpr($delta);

  /* Add classes based on the block delta. */
  switch ($delta) {
    case 'page-title':
      if ($vars['is_front']) {
        /* Hide the page title on the home page. */
        $classes[] = 'element-invisible';
      }
      break;
    case 'feature_video-block':
      $classes[] = 'block-rounded';
      $classes[] = 'block-white';
      break;
    case 'shizzle_browse_block':
      $classes[] = 'block-rounded';
      $classes[] = 'block-white';
      break;
    case 'shizzle_block':
      $classes[] = 'block-rounded';
      $classes[] = 'block-white';
      break;
    case 'site':
      $title_classes[] = 'element-invisible';
      break;
    case 'main-menu':
      $title_classes[] = 'element-invisible';
      break;
    case 'menu-footer-menu':
      $title_classes[] = 'element-invisible';
      break;
    case 'new_proposals-block':
      $classes[] = 'block-rounded';
      $classes[] = 'block-brown-light';
      $title_classes[] = 'block-title-collapse';
      break;
    case 'popular_categories':
      $classes[] = 'block-rounded';
      $classes[] = 'block-brown';
      $title_classes[] = 'block-title-collapse';
      break;
    case 'get_started_educators':
      $classes[] = 'block-rounded';
      $classes[] = 'block-fancy';
      $classes[] = 'block-fancy-orange';
      $title_classes[] = 'fancy-title';
      $vars['block']->subject = '<em>Educators</em> Get Started';
      break;
    case 'get_started_students':
      $classes[] = 'block-rounded';
      $classes[] = 'block-fancy';
      $classes[] = 'block-fancy-green';
      $title_classes[] = 'fancy-title';
      $vars['block']->subject = '<em>Students</em> Get Started';
      break;
  }
}

So, what does this look like? pic?