BEM

Well I am using a BEM workflow with Sass. And it's working out pretty well. With Sass/Less you can easy make use of the & operator.

.Breadcrum {
    display: flex;
    flex-direction: row;

    &__item {
        flex: 1;

        &:after {
            content: '->';
        }    
    }
}

This will be generated into

.Breadcrum { ... }
.Breadcrum__item { ... }

The & operator is really king. Otherwise you could do something like this:

.Breadcrum {
    ....
    .Breadcrum__item {
        ...
    }
}

Which however is more restrictive. It would compile into this:

.Breadcrum { ... }
.Breadcrum .Breadcrum__item { ... }

More Complex

This will also work if you have more complex components.

.Member {
    ...

    &__name { ... }

    &__image {

        &--small {}
    }

    &__info{ ... }

    &.is-active { ... }
}

Well you need to be carefull with nesting. At some point it will get messy.

For better readability you can also make some mixins that are helping you.

.Modal {
    ...
    @include variant(danger) { ... }
    @include variant(warning) { ... }
    @include has(header) { ... }
    @include has(body) { ... }
    @include has(footer) { ... }
    @include has(close-button) { 
        @include variant(danger) { ... }
    }

I think this helps with readability, because you see in words, which components or subcomponents a component has and which variants.

This would compile into

.Modal { ... }
.Modal--danger { ... }
.Modal--warning { ... }
.Modal__header { ... }
.Modal__body { ... }
.Modal__footer { ... }
.Modal__close-button { ... }
.Modal__close-button--danger { ... }

And the HTML could be something like this:

<div class="Modal Modal--danger">
    <div class="Modal__header>
        Ups, are you sure?
    </div>
    <div class="Modal__body">
        U sure, u want delete this cat picz?!
    </div>
    <div class="Modal__footer">
        <button> Yes, I am sure </button>
        <button class="Modal__close-button"> No plx </button>
    </div>
</div>