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("feed-sprite@2x.png");
          &.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("feed-sprite@2x.png");
  
  &: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; }

Looking at the nested .feed .nav ul li a vs. .icon-list-link, it's clear that we're styling the link in an icon list. This also allows for us to have a list of icons with this consistent styling outside of the .feed .nav.

It's arguable that all styles don't need to be completely modular, but if you start with good planning, most of your site can be assembled with these building blocks. And on most projects, this approach comes in handy and I can easily replicate a style on a new piece that a clients wanted to add before launch without copy/past styles into a new context.

Also, in the above. I'd argue things like background color could be acheived in a more modular manner as well. With some classes like

.ui-dark, /* or */ .content-dark {
  background-color: $dark-color;
  color: $light-color;
}

I would probably abstract the icons out even further, too.

// just some example code, not directly from 3M but could work there

/**
 * Icons
 */
.icon {
  height: 10px;
  width: 10px;
}
.icon--grid {}
.icon--story {}
.icon--news {}
.icon--refresh {}

// <a><span class="icon  icon--grid"></span> Latest</a>

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.