I assume in this article that you use the Angular CLI to build your project and use SCSS (or other preprocessing CSS like LESS).

Why having a good CSS architecture inside our Angular app?

When building our application, I saw that some people use only global style without using the component style isolation, or rewrite again and again properties… However, keep going this way can be difficult in the future and also less efficient.

If you are interested in PWA and did some tests, you can lead to render-blocking stylesheet, so poor performance in low network or low-end devices.

DRY in your files!

Reuse properties inside your application and other projects!

1. Create a folder for your global styles

When generating your project, you have three main folders: app, assets and environments.

The “assets” folder is only for images and fonts for example. Don’t put your global styles there, or when you’ll build your application, they will be added inside, it is not necessary.

My advice is to create a folder especially for your global styles (you’ll be able to reuse them in other projects!)

For example:

The underscore in front of each filename is to define a partial that will be used to main styles (your styles.scss or components styles).

2. Isolate your CSS in components

Each time you generate a new component, you have your component.scss. By default, Angular is able to perform an emulated Shadow DOM

There are two main advantages with this technique:

These CSS properties will be loaded only if the component is used in the rendered page. (better performance)

The CSS is scoped and simplified. (better productivity)

How to use global CSS properties in component styles?

In the shadow dom system, the CSS is isolated. So the global properties like mixins, color variables, placeholders,… are unreachable and it will raise errors in the compiling process. To use them, you need to import these partials inside the component, like the imports in your typescript files!

“~” is used to tell SASS to find the file in absolute path from root. It is more practical than using the relative path inside the components.

3. Global CSS > Module CSS > Component CSS

You can also use inheritance to your advantage.

Global CSS is easy to use: just insert some properties in styles.scss and it will always be present in each component.

Before going forward, I present you my way to work:

As you can see, I have a folder for all my components for this module.

The module is app.module. We have a “component module” called app.component.

So, how to inherit the properties from a “component module” inside other components in this module?

We now know that each component is scoped and isolated to other components. To achieve inheritance in this case, I found 3 different ways:

Add the file in the styleUrls in your component:

Pay attention to the order! First, the component module and second, the component.

Import the file in the component style:

about.component.scss

Create a new global file for modules:

And simply import the partial in the component like before in the article:

Conclusion

We can also go further but we have now some tricks to have a clean CSS and easy to reuse inside our application.

Don’t hesitate to applause this article!