Contextual Nesting vs. OOCSS

gistfile1.scss

/*------------------------------------*\
    3M Homepage Feed Nav Bar Styles
\*------------------------------------*/
.feed {
  .nav {
    .h4 {
    }
    ul {
      li {
        a {
          &.latest {}
          &.stories {}
          &.news {}
          &.refresh {}
          &:hover, &.selected {
            &.latest {}
            &.stories {}
            &.news {}
            &.refresh {}
          }
        }
      }
    }
  }
}


/*------------------------------------*\
    "Refactored"
\*------------------------------------*/
.feed {}
.feed-nav {}
.feed-nav__title {}

.icon-list {}
.icon-list > li {}

.icon-list-link {
  &:hover, &.icon-list-item--selected {
    // adjust background-position-x/y here.
  }
}

.icon-list-item--latest {}
.icon-list-item--stories {}
.icon-list-item--news {}
.icon-list-item--refresh {}









/*------------------------------------*\
    Nested, with styles.
\*------------------------------------*/
.feed {
  background: $black;
  .nav {
    position: relative;
    padding: 1em 0;
    .h4 {
      position: absolute;
      top: 50%;
      left: 0;
      margin: -0.5em 0 0;
      color: $white;
      font-size: 1em;
      line-height: 1em;
      font-weight: normal;
    }
    ul {
      float: right;
      list-style: none;
      padding: 0;
      margin: 0 0 0 25%;
      li {
        float: left;
        padding-left: 3em;
        a {
          display: block;
          padding-left: 30px;
          color: $white;
          font-size: 12px;
          font-size: 0.667rem;
          line-height: 24px;
          background: asset-url("feed-sprite.png", image) no-repeat 0 0;
          @include image-2x("[email protected]");
          &.latest {
            background-position: 0 0;
          }
          &.stories {
            background-position: -120px 0;
          }
          &.news {
            background-position: -240px 0;
          }
          &.refresh {
            background-position: -360px 0;
          }
          &:hover, &.selected {
            &.latest {
              background-position: 0 -40px;
            }
            &.stories {
              background-position: -120px -40px;
            }
            &.news {
              background-position: -240px -40px;
            }
            &.refresh {
              background-position: -360px -40px;
            }
          }
        }
      }
    }
  }
}


/*------------------------------------*\
    "OO", with styles.
\*------------------------------------*/

/**
 * Feed UI
 */
.feed { background: $black; }
.feed-nav {
  position: relative;
  padding: 1em 0;
}
.feed-nav__title {
  position: absolute;
  top: 50%;
  left: 0;
  margin: -0.5em 0 0;
  color: $white;
  font-size: 1em;
  line-height: 1em;
  font-weight: normal;
}

/**
 * Icon List
 */
.icon-list {
  float: right;
  list-style: none;
  padding: 0;
  margin: 0 0 0 25%;
}
.icon-list > li {
  float: left;
  padding-left: 3em;
}
.icon-list-link {
  display: block;
  padding-left: 30px;
  color: $white;
  font-size: 12px;
  font-size: 0.667rem;
  line-height: 24px;
  background: asset-url("feed-sprite.png", image) no-repeat 0 0;
  @include image-2x("[email protected]");
  
  &:hover, &.icon-list-item--selected { background-position-y: -40px; }

}
.icon-list-item--latest { background-position: 0 0; }
.icon-list-item--stories { background-position: -120px 0; }
.icon-list-item--news { background-position: -240px 0; }
.icon-list-item--refresh { background-position: -360px 0; }

Would be interesting to see what it would look like taking the other icons I can think of into account http://solutions.3m.com/innovation/en_US/connect

The basic styles like float and display could be shared but seems like all the sizing-related stuff would be different. Maybe a case to unify the design, but assuming it has to look the way it does, would those elements need to be .icon.icon__small or something?

Also, I just tried it and firefox still doesn't support background-position-y.