A CSS Pattern Using Sass / BEM

BEM (Block Element Modifier) is a wonderful approach to CSS namespacing, when mixed with SASS the result can be fun to work with as well as highly semantic:

.inline-label {
    display: inline-block;
    vertical-align: middle;
    font-size: $font-size-base;
}

.inline-label--panel {
    @extend .inline-label;
    background: #999;
    color: #f0f0f0;
}

Now you could have done this:

.inline-label,
.inline-label--panel {}

and in fact this is the code that sass will generate, however by using the @extend sass function the resulting code is much more readable and explicit.

In summary read about BEM and start looking for ways to use it in your projects. It makes css more managible and easy to add to mark up.