Селектор потомков или куда класть стили?⁠⁠

Давайте представим, что у нас есть компонент card:

// Файл card.scss
.card {
 // стили
}

И компонент container:

// Файл container.scss
.container {
 // стили
}

Теперь нам нужно написать стили для card, который находится внутри container.

Тезис

Если мы пишем стили для компонента, то они должны находится в файле этого компонента.

В нашем случае это — card.

Пример

Воспользуемся селектором расширения SASS:

// Файл card.scss
.card {
 // стили
 %container & {
  // еще стили
 }
}
// Файл container.scss
.container {
 @extend %container;
 // стили
}

Здесь я для класса container задал одноименный extend.

А потом дописал стили в card.

Это скомпилируется примерно в такой css:

.card {
 // стили
}
.container {
 // стили
}
.container .card {
 // стили
}

@extend я использовал для того чтобы была возможность быстро переименовать класс, но можно и без него.

Альтернативный пример

// Файл card.scss
.card {
 // стили
 .container & {
  // еще стили
 }
}

Минус этого подхода в том, что если класс container изменится, то его придется править в нескольких местах.

А плюс — не требуется использовать extend или sass.

Антипример

Иногда можно увидеть как разработчик пишет так:

// Файл container.scss
.container {
 // стили
 .card {
  // еще стили
 }
}

Это приводит к тому, что стили для card находятся в разных местах. И это становится большой проблемой, когда таких мест становится несколько:

// Файл container.scss
.container {
 // стили
 .card {
  // еще стили
 }
}
// Файл main.scss
.main {
 // стили
 .card {
  // еще стили
 }
}
// Файл wrapper.scss
.wrapper {
 // стили
  .card {
  // еще стили
 }
}

Еще демо можно посмотреть в кодпене.