>>You don't want your final build to have a bunch of 'col-md-6' class names.

Why not? Who cares what your class names are?

Nobody, except the individual that has to change them all when you need to swap out frameworks or upgrade to a version that breaks compatibility or the product team decides on a new layout across the app...

Okay, no one has actually explained how Semantic UI overcomes this.

What if in the future you decide to switch from Semantic UI to something else?

Fair point, but I'm with you on it—I'm not proposing Semantic UI is any better, just that ".col-md-12" has its own set of problems. I suppose in theory what would be the best is using application selectors (i.e. class names your application owns) with the sass version of bootstrap/semantic/etc to extend the selectors with appropriate styles. However, I've done this, and while I'm no CSS expert so I probably was doing something wrong, my stylesheets became ginormous.

Now, I just kind of live with the ".col-md-12" business...

Some people think bootstrap without dashes in the class names is better... or is there more to it?

Good question. From looking at it, it looks less, well, dashy.

But in addition, there also seems to be much more compact HTML. I don't know if that is actually the case.

Compare:

<button type="button" class="btn btn-primary"> Primary </button>

<button class="ui button"> Follow </button>

or

Semantic UI:

<div class="ui breadcrumb"> <a class="section">Home</a> <div class="divider"> / </div> <a class="section">Store</a> <div class="divider"> / </div> <div class="active section">T-Shirt</div> </div>

Twitter Bootstrap:

<ol class="breadcrumb"> <li class="breadcrumb-item active">Home</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item active">Library</li> </ol> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active">Data</li> </ol>

From Semantic UI docs:

  <div class="ui three column grid">
    <div class="four wide column"></div>
    <div class="eight wide column"></div>
    <div class="four wide column"></div>
  </div>

How is that different than col-md-8? Either can be used as HTML classes or Sass mixins.

I think Google takes it one step further and minifies the CSS class names