SCSS Architecture in Angular
Why CSS architecture is important? How to maintain it, in a long run?
Create a Css shared file available for import
Always keep your Scss components in a shared folder at the TOP structure of your application. Also, those components should be using your shared colors and spacing.
CSS and SCSS variables are your friends, -> if you do not confuse them
Scss variable is a static variable. You can define font size, or common spacing and then import it in all places where needed. On the other hand, CSS variables are very flexible. With css variables, you can create a property that could be dynamic such as:
— background-color: white;body {
background: var(--background-color);
}.darkMode {
--background-color: black;
}
Use css guidline
It is a good practice to have one css style, or at least have a specific order of your class properties. I intentionally won’t add here all style guides, my goal is only to mention that a project should have one style guide and it should be respected.
Use max. 3 levels of scss grouping
It is good practice to group your css classes, but it shouldn’t be nested as hell. I recommend max. 3 levels of nested classes.
Use prettier for styling
Be sure to configure your prettier, it is also good practice to configure a style guide for the order of properties in your Html templates (react and angular)
Avoid Scss duplication
You shouldn’t be a fast monkey when writing Css. Take your time, and check your project if your element hasn’t been used somewhere. Check if the headline in your dialog isn’t the same as in others and make it a shared Css class.
Do not use bootstrap in Angular project!
Of course, you can using bootstrap in Angular. But if you are using a design system, please avoid using bootstrap for small styling. With CSS flex and grid you can do the layout easily!
Do not use inline styles (unless it’s one dynamic property), nor !important
There are some exceptions when you can not override some property from an external library. Those might be exceptions for !important.
Today I wrote only a small article regarding basic rules for Scss. My intention wasn’t to go into too many details but to show just basic rules for your styling to be efficient.
