Требования:
- использовать стили компонентов
- не используйте презентационные классы в шаблонах, сохраняйте шаблоны чистыми и семантическими
- избегать дубликатов в связке
Чтобы сохранить шаблоны семантическими и чистыми, наша команда решила использовать миксины (sass / less).
Поэтому вместо написания <button class="btn btn-primary btn-lg" type="button">Press</button>
мы пишем <button class="send-request" type="button">Press</button>
а затем в component.less:
@import '@utils';
.send-request {
.button(@color: 'primary', @size: 'large');
}
Но после проверки производственного комплекта AOT я обнаружил, что код .button mixin дублируется для каждого использования.
.some-button[_ngcontent-%COMP%]{...(same mixin's code)...}
.another-button[_ngcontent-%COMP%]{...(same mixin's code)...}
.one-more-button[_ngcontent-%COMP%]{...(same mixin's code)...}
Итак, я в поисках серебряной пули.
Я знаю, что AOT трясет дерево, если вы используете styleUrls, но он не подходит для кнопок с разными именами.
Использование глобальных стилей также является плохим советом, потому что мы хотим сохранить только семантику.
Я считаю, что все дублирование в коде можно оптимизировать, но не уверен, поддерживается ли Angular прямо сейчас.