[akaBruce]

I think the article suggests using modifiers instead. So rather than having

  .mainContentWidget {
    background-color: white;
    font-size: 1.5em;
    text-transform: uppercase;
  }
  .sideBarWidget {
    background-color: red;
    font-size: 1.5em;
    text-transform: uppercase;
  }

  <div class="mainContentWidget"></div>
  <div class="sideBarWidget"></div>

The article instead would suggest you do:

  .widget {
    background-color: white;
    font-size: 1.5em;
    text-transform: uppercase;
  }
  .widget-sidebar {
    background-color: red;
  }

  <div class="widget"></div>
  <div class="widget widget-sidebar"></div>

To address the bit about common values vs. special modifications. The implication is, although you might have to change some names, it's not context dependent. So if you decide that you want to put apply that same style to a widget in your footer ...and the header ...and this special case on a certain page landing page ...etc, then you just add the extra class to your HTML rather than adding a bunch of context dependent rules in the CSS.