Что означает запись селектора с пробелом и амперсандом в CSS и какие возможности она дает

Что проверяют

Владеете ли вы комбинаторами селекторов и понимаете ли, откуда взялся амперсанд: это инструмент вложенности, и ведёт он себя в препроцессоре и в браузере по-разному.

Как отвечать

Пробел это комбинатор потомка: .card .title найдёт элемент с классом title на любой глубине внутри карточки. Рядом стоит назвать соседей: > выбирает только прямого потомка, + следующего соседа, ~ всех последующих соседей, а слитная запись .card.active это один элемент с двумя классами.

Амперсанд это ссылка на родительский селектор внутри вложенного правила:

.card {
  &:hover { border-color: black; }
  &.is-open { max-height: none; }
  .dark-theme & { background: black; }
}

Что это даёт: состояния и модификаторы лежат рядом с основным правилом, родителя можно поставить снаружи (последняя строка примера), а в препроцессорах амперсанд склеивается с текстом, поэтому в БЭМ пишут &__title и &--big.

Важное различие: вложенность и амперсанд есть и в нативном CSS, но склейка имён там не работает. В браузере амперсанд это не подстановка текста, а настоящий селектор, эквивалент :is() со списком родителей, поэтому &__title невалиден, а специфичность считается по самому весомому селектору списка. Препроцессор же просто разворачивает текст до того, как файл увидит браузер.

Где спотыкаются

Называют пробел выбором дочерних элементов. Пробел это любая глубина вложенности, и правило неожиданно красит содержимое вложенного компонента, а за дочерний уровень отвечает >.

Переносят &__title из препроцессора в нативную вложенность и удивляются, что стили исчезли. Побочный эффект склейки ещё и в том, что искать класс по коду нечем: строки card__title в файлах просто нет.

Не следят за специфичностью вложенных правил. Каждый уровень добавляет вес, и короткое правило с модификатором уже не перебивает глубоко вложенное базовое. Лечится это не пометкой важности, а выпрямлением вложенности до одного, максимум двух уровней.