How does Angular ViewEncapsulation affect web pages and style maintenance? [migrated]

So we have a team of developers who embraces Angular and with that comes ViewEncapsulation.

This means that when they create a Angular component, they add the styling with the component and don't use the global css. Depending on the ViewEncapsulation mode, the CSS ends up as inline styling either in the header or in the HTML.

We do have a Design System and we want to create a library of re-usable Angular components.

During my years developing web pages, the mantra was: Inline styling is bad! I don't know if this still applies today as the browsers get more advanced.

My arguments for not encapsulating styling in Angular components are:

  • Inline styling makes html documents bigger, thus slower to load
  • If the Angular component reads a css file on page load, it creates additional HTTP requests which again slows down page load
  • Maintaining a style guide will be difficult when you do not have control over the components used
  • Different styling may be added to similar components because it's done by different developers. This may alter component behaviour.

Dose anyone have experience with putting styling in Angular components and at the same time manage a design system?

Tags: