как правильно прописать классы SCSS

Есть несколько страниц сайта, которые относятся в разделу "shop". У каждой страницы есть общий класс shop и сопутствующий класс, который отвечает за название самой страницы.

 <div class="shop autorization"></div>
 <div class="shop orders"></div>
 <div class="shop card"></div>
 <div class="shop information"></div>

Как правильно это отразить в SCSS? Первый вариант:

.shop {
    &.autorization{

    }
    &.orders{

    }
    &.card{

    }
    &.information{

    }
}

Второй вариант:

.shop &
    .autorization{
    }
    .orders{
    }
    .card{
    }
    .information{
    }