The descendant selector or where do I put the styles?

Let's imagine that we have a card component:

// File card.scss
.card {
    // styles
}

And the component:

// File container.scss
.container {
    // styles
}

Now we need to write styles for the card that is inside container.

Thesis

If we write styles for a component, they should be in the component's file.
In our case it is a card.

Example

Let's use the extension selector SASS:

// File card.scss
.card {
    // styles
    %container & {
        // styles agains
    }
}

// File container.scss
.container {
    @extend %container;
    // styles
}

Here I set extend for the container class.
And then I added styles to card.

This compiles into about this css:

.card {
    // styles
}

.container {
    // styles
}

.container .card {
    // styles
}

I used @extend so that I could quickly rename the class, but I could do without it.

Alternative example

// File card.scss
.card {
    // styles
    .container & {
        // styles again
    }
}

The disadvantage of this approach is that if the container class changes, you will have to edit it in several places.
On the plus side, you don't need to use extend or sass.

Anti-example

Sometimes you can see a developer writing like this:

// Files container.scss
.container {
    // styles
    .card {
        // styles again
    }
}

This leads to the fact that the styles for cards are in different places. And this becomes a big problem when there are several such places:

// File container.scss
.container {
    // styles
    .card {
        // styles again
    }
}

// File main.scss
.main {
    // styles
    .card {
         // styles again
    }
}

// File wrapper.scss
.wrapper {
    // styles
    .card {
        // styles again
    }
}

More demos are available at codepen.