Обработка CSS в Angular

Question

Это общий вопрос относительно структуры проекта в Angular и инструментов / программного обеспечения для проектирования пользовательского интерфейса. Я на самом деле не ищу примеры кода.

Мой работодатель вложил в проект Angular, и теперь я должен реализовать наш CI и изменить внешний вид пользовательского интерфейса, чтобы он соответствовал нашему другому (не веб) программное обеспечение. У меня есть некоторый опыт написания кода, но в основном я дизайнер, поэтому я могу просто упустить некоторые большие и очевидные вещи, пожалуйста, потерпите меня.

Глядя на документы для Angular, я возникло ощущение, что дизайн должен быть применен к компоненту за компонентной базой, в идеале - по одному файлу CSS. Что, на мой взгляд, может привести к удвоению кода CSS. Это действительно должно быть так?

Разве не было бы разумнее объединить все css в центральный файл, чтобы изменения могли применяться глобально? (Я не говорю о темах здесь, поскольку Angular темы, кажется, только о цветах. Я говорю о таких вещах, как общий вид, шрифты, размещение и т. Д. c.)

Если нет, Существуют ли инструменты (кроме представления разработчика браузера), которые позволяют получить хороший обзор всех CSS в проекте? И будет ли осуждено использование переменных для восстановления блоков кода?

Я знаю, CSS препроцессоры существуют, а некоторые имеют реализации в Angular. Но так как я использовал их только косвенно (при создании тем для CMS), я подумал, что просто хочу спросить, есть ли что-нибудь, что специфицирует c до Angular, прежде чем я go погрузлюсь в них.

Заранее спасибо за любые ответы!

Answer 1

Angular - это основанная на компонентах инфраструктура, которая поощряет использование компонента в качестве отдельной единицы (включая стили). Более того, хорошо иметь инкапсулированные стили, связанные с компонентами, так что это защитит неявное наследование, и вы не столкнетесь с проблемой, когда небольшое изменение в родительском компоненте нарушает представление о его дочернем элементе. Для больших проектов это очень важно. Дублирование кода не должно быть большой проблемой, если вы следуете передовым методам (например, разбиваете на более мелкие повторно используемые компоненты) или препроцессорам, таким как less или sass. Они могут предоставлять различные миксины и функции, что позволяет многократно использовать множество css блоков. Для небольших проектов действительно не имеет значения, какую стратегию стиля вы используете, но если это проект с> 50 компонентами, я бы придерживался Angular рекомендуемой стратегии.

Answer 2

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

Предположим, у вас есть два компонента. Один из них является домашним компонентом, а другой - компонентом сетки. В обоих компонентах есть всплывающий компонент. Таким образом, вы можете поместить всплывающие стили / классы в общий файл css. Но для компонента сетки вам нужно поместить стили сетки в grid.component. css. Это просто хорошая практика, но вы также можете поместить стиль сетки в общий файл css, и он будет работать правильно.

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