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

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

// File card.scss
.card {
    // styles
}
Вход в полноэкранный режим Выход из полноэкранного режима

И компонент:

// File container.scss
.container {
    // styles
}
Войти в полноэкранный режим Выход из полноэкранного режима

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

Thesis

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

Пример

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

// File card.scss
.card {
    // styles
    %container & {
        // styles agains
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима
// File container.scss
.container {
    @extend %container;
    // styles
}
Войти в полноэкранный режим Выход из полноэкранного режима

Здесь я установил extend для класса контейнера.
Затем я добавил стили для card.

В результате получился примерно такой css:

.card {
    // styles
}

.container {
    // styles
}

.container .card {
    // styles
}
Войти в полноэкранный режим Выход из полноэкранного режима

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

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

// File card.scss
.card {
    // styles
    .container & {
        // styles again
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Антипример

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

// Files container.scss
.container {
    // styles
    .card {
        // styles again
    }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

// File container.scss
.container {
    // styles
    .card {
        // styles again
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима
// File main.scss
.main {
    // styles
    .card {
         // styles again
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима
// File wrapper.scss
.wrapper {
    // styles
    .card {
        // styles again
    }
}
Войти в полноэкранный режим Выход из полноэкранного режима

Больше демо-версий доступно на codepen.

Оцените статью
Procodings.ru
Добавить комментарий