Предотвращение загрязнения CSS 3 -й стороной в угловой ⇐ CSS

[Anonymous]

Наше приложение - состоящее из множества угловых приложений и библиотечных проектов - использует несколько сторонних угловых библиотек для общих компонентов, таких как входы, кнопки, всплывающие окна и т. Д. Каждая такая 3 -я сторона приносит свой собственный CSS, который обычно не инкапсулируется, то есть мы предполагаем импортировать стиль -таблицы в каждом угловом приложении. Имеет свой собственный CSS - виновником обычно является Bootstrap , который содержит «агрессивные» правила CSS, то есть он не только стиль HTML -элементы с конкретными классами, но и стиля HTML -элементы на основе их тегов, например, «Все входы текста типа должны выглядеть так». Проблема заключается в том, что мы находимся в ситуации, когда прикладному проекту довольно много лет и имеет много контента и функциональности, и мы только что получили новый запрос на функцию, где мы должны использовать стороннюю компонентную панель, которая для того, чтобы смотреть правильно, мы должны принести весь CSS третьей стороны, но это испортит стиль всего проекта. Кроме того, в нашем коде есть этот недостаток, который разработчики использовали очень общие классы в прошлом, такие как «BTN», «ICON», «Tooltip», так что вы можете представить, какое влияние может оказать одно глобальное импорт CSS на проект. Проблема, вызванная импортом - это слишком важно. Мы не хотим этого!

Применить некоторую таблицу стилей CSS, которая, возможно, мы сможем найти онлайн, который сбросит все обратно на нормальное значение - мы бы предпочли не делать этого, поскольку проекты уже являются кошмаром CSS из -за глобального переопределения, небрежного :: ng-deep useges и ! /> Попробуйте самообладать внешние CSS в некоторых общих обертках-мы уже находимся в процессе создания обертка по сравнению с большинством сторонних компонентов в нашем приложении, которые ведут себя как черные боксы (я не буду подробно рассказать о том, почему мы это делаем), так что это кажется хорошим кандидатом в решение. Я собираюсь уточнить это в следующих строках. Вместо этого у нас есть библиотека в нашем рабочем пространстве, где мы создали компонент FOO, который использует стороннюю панель компонентов, и мы собираемся импортировать компонент FOO в проекте приложения. Вот некоторые подходы, которые я могу придумать при импорте CSS для 3-й борьбы с компонентами: < /p>

Не импортируйте bar-library.min.css в foo-library, но импортируйте его в приложениях конечных пользователей, которые используют foo-library с использованием файла angular.json. Из того, что я понимаю из шарнирной библиотеки и угловой документации, это рекомендуемый способ. Перевернутой это является то, что bar-library.min.css, несомненно, будет импортирован только один раз. Недостатком этого является загрязнение CSS, которое я объяснил ранее.:host::ng-deep { // here, :host is
// import inside :host in order to prevent CSS rules from leaking outside of
@import (less, once) "node_modules/bar-library/bar-library.min.css"
}
< /code>
upsides этого подхода - это профилактика утечки /загрязнения CSS и тот факт, что мы следуем принципу инкапсуляции ООП (как только мы импортируем FOO.component в проект приложения, мы получаем все необходимое, чтобы он был правильно, чтобы он был правильно; не нужно знать, что 3 -я сторона является foo.component, используя за сценами, чтобы импортировать соответствующие CSS в Angular.JSOSS). Недостатком является беспокойство о том, что bar-library.min.css может быть импортирован несколько раз в конечный выход JavaScript, основанный на количестве компонентов foo-library, которые импортируют его и /или на основе количества в внешних приложениях, таким образом, экспоненциально увеличивая размер на диск. :: ng-deep < /em>, поэтому мы получаем следующий код:
foo-component { // here, foo-component tag name is a very specific name so that there's almost 0 chance that this selector selects more than it needs to
@import (less, once) "node_modules/bar-library/bar-library.min.css"
}
< /code>
< /li>
< /ol>
Вопросы следующие: < /p>

Какой из вышеперечисленных подходов я должен предпочесть? Есть ли другой, лучший подход, который я здесь не перечислил? Число постоянно (один раз)? Это переменная на основе количества компонентов Foo-Library, которые импортируют bar-library.min.css? Это переменная на основе количества экземпляров или любого другого аналогичного компонента из Foo-library, которые используются в приложении?>

Подробнее здесь: https://stackoverflow.com/questions/779 ... in-angular