Оптимизированный параметр CSS в компонентах angualr 6, общий CSS в styles.css или для каждого компонента CSS

Question

У нас есть несколько общих стилей в style.css, и эти классы используются в проекте в разных компонентах.

.bckMagentaClr{
    background-color: #e20074 !important;
}
.fntClrWhite{
    color: #fff !important;
}
.f16p
{
    font-size: 16px !important;
}
.Arial{
    font-family: Arial;
}

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

<div class ="f16p  Arial bckMagentaClr fntClrWhite">
  Set of text comes here.
</div>

ИЛИ

создайте класс для этого конкретного компонента и используйте его.

.txtDiv {background-color: # e20074! Важный;цвет: #fff! важно;размер шрифта: 16 пикселей! важно;семейство шрифтов: Arial;}

Набор текста приходит сюда.