Правильная разбивка scss в angular

Question

Не могу разобраться, как грамотнее всего разбивать scss в нижеописанном случае.

Допустим, у меня есть реюзейбл компонент "продукт" (состоит из имя продукта, картинка, цена, мини описание и т.д). Он часто показывается на разных страницах, и везде отличается стилями. Например, в 1м месте одна величина шрифта, размер картинки (и куча др. отличающиехся стилей), а в 2м - другая, в 3м - третяя.

Как правильно (и где) прописать scss отдельно для этих 3х случаев?

В самом product.component.scss, выходит, я могу прописать только общие стили. В общем файле стилей style.css прописывать все вместе с другими стилями не хочется. Создавать отдельную директорию (типа product.scss) в assets? Тогда как правильнее прописывать стили? Типа так (ниже)?

.Такой-то компонент1{
    Продукт {...}
}

.Такой-то компонент2{
    Продукт {...}
}
...

Вопрос #2: Допустим, если у меня есть компонент "listOfProducts", и дочерний "product" - как в родительском scss прописать стили для дочернего? У меня родительский scss не видит дочернего, и приходится делать в assets отдельный файл, а в нем долгая простыня стилей, потому что такие родительско-дочерние listOfProducts есть в разных местах на сайте, и отличаются визуально.

Может сможете подсказать пример правильной структуры, или как это делать правильно? Заранее спасибо за ответ.

Answer 1

Я бы на вашем месте в директории продукта создал еще пару scss файлов и подключил в компонент. Так они находятся рядом со стилизуемым компонентом. Инкапсуляция, все дела.
Второй случай зависит от использования. Если это простой темплейт, то класса на дочерний достаточно.
Таким образом у вас может быть несколько файлов. Допустим:
```
// product.basic.scss
:host {
    &.basic {...}
}

// product.red.scss
:host {
    &.red {...}
}

// product.blue.scss
:host {
    &.blue {...}
}
```
И в темплейте все просто:
```
<parent-product-list>
  <product class="blue"></product>
</parent-product-list>
```
и тд.

Исходя из моего опыта, в родительском компоненте стилизовать дочерний - очень плохая практика. Все, чем должен управлять родитель, это позиционирование элемента внутри себя. То есть все внешнее окружение. А остальное - знание лично компонента. Так логика не размывается по разным частям приложения. Вы четко понимаете, когда что-то идет не так, где эти стили искать. Source-map не панацея, а вот дисциплина да.

БЛОГ НА HUSL

Правильная разбивка scss в angular

Ответы (1 шт):