Object oriented CSS

Question

I watched this presentation about object oriented css, but I think I either don't understand it correctly or don't understand the benefits of using OO CSS:

Example HTML:

<div class="border-1 bg-2 color-1 font-1">
</div>

Example CSS:

/* borders */
.border-1 { border: 1px solid red; }

/* backgrounds: */
.bg-2 { background: yellow; }

/* other sections */

I see an advantage in being able to change styles for multiple elements quickly, for instance, being able to switch the color scheme would be very useful.

But actually, you're defining the style/look inside the HTML, or at least a part of it. Of course, it's better than using the style attribute, because you still are able to exchange the styles for a set of groups.

The point is, you are defining the style-groups inside the HTML, but I learned that you should create "logical" groups inside the HTML (e.g. class="nav-item" / class="btn submit-btn") and the CSS completely applies the style and defines which elements belong together from the "stylistic" point of view (e.g. .nav-item, .submit-btn { background: red; }).

Maybe I totally misunderstood the concept. However, I still don't know a good way of constructing my CSS.