In an angular 9 app, what should be more preferred; global styles or component level styles

Question

We've two options to keep styles in an Angular 9 app; global styles in styles.css or individual component level styles in the component css file. If looked at the project from performance perspective; what should be the preferred way? Should we keep all styles in a single global style.css file or keep each component related styles in their component.css file?

Answer 1

To answer this question we have to refer to the Angular official doc.

By using Using component styles you will have a better modular design.

Angular can bundle component styles with components, enabling a more modular design than regular stylesheets.

But, if there are some styles that are common between more than one component it's better to have a shared css and e.g. if you use pre-processor such as .SCSS, LESS, SASS, ..., you can have some _var.scss to define general styles such as base color, fonts, ... and then @import in other component styles or just register global style files in the styles section which, by default, is pre-configured with the global styles.css file.

So, using component styles provide scoping restriction and View encapsulation for your app. This scoping restriction is a styling modularity feature:

• You can use the CSS class names and selectors that make the most sense in the context of each component.
• Class names and selectors are local to the component and don't collide with classes and selectors used elsewhere in the application.
• Changes to styles elsewhere in the application don't affect the component's styles.
• You can co-locate the CSS code of each component with the Typescript and HTML code of the component, which leads to a neat and tidy project structure.
• You can change or remove component CSS code without searching through the whole application to find where else the code is used.

Answer 2

step to define/preferable way for global style

1. Create _base.scss file in the css folder (first create css folder).
2. import other helping scss file in _base.scss file
3. add the entry of _base scss file in style.scss file (style.scss available when we create the folder).

Answer 3

There are several ways to add Global (Application wide styles) styles to the Angular application. The styles can be added inline, imported in index.html or added via angular-cli.json. The angular allow us to add the component specific styles in individual components, which will override the global styles.

Answer 4

I don't think there is much (if any at all) significant difference in performance. The global or component style distinction is all about the scope of those styles and maintainability of your codebase. Generally its good idea to keep everything in components as they are scoped to themselves and will not accidentally override other same styles from anywhere else. And global styles should stay mostly to theming, utility, helpers etc.

Besides you have an option to make component style global as well, if for some reason you need to do that.