Imagine a scenario where we have the following setup in our angular application
+-- src
| +-- app
| | +-- customer
| | | +-- customerStyle.scss
| | | +-- customerModule.ts
| | +-- product
| | | +-- productStyle.scss
| | | +-- productModule.ts
| +-- sass
| | +-- _commonStyles.scss
| | +-- appStyle.scss
| | +-- projectLevelStyles.scss
We can structure our project-level Sass file as shown below:
@import 'commonStyles';
// Project level classes
@import 'projectLevelStyles';
// Module level classes
@import '../app/customer/customerStyle.scss'
@import '../app/customer/productStyle.scss'
In these customerStyle.scss and productStyle.scss files, we can define CSS classes that are shared across multiple components within their respective modules.
It is important to note that when you create a stylesheet at a level other than the component level (e.g., inside a module or project directory), Angular treats those styles differently.
Angular Component Styles
Angular allows bundling of component styles with components, providing a more modular design compared to regular stylesheets. The selectors defined in a component's styles only apply within that component's template.
Therefore, it is worth mentioning that any stylesheets not associated with the components' styleUrls array can be applied to any element on your site (if specificity is not used). They are not limited to just that module. Thus, this approach may not work for all scenarios. However, I find it effective for my modules as I understand this limitation and can write my styles in the modular stylesheet to specifically target the root element of that module...
Component vs. Global
In my application, the customerModule consists of a root component called customerComponent, which has a root element with the class:
customer-container
With this structure in place, I can define my styles in customerStyle.scss using a prepended selector like this:
.customer-container .info-heading {
font-size: 15px; color: #333;
}
.customer-container .section-divider {
margin-top: 1em; border-top: 1px solid #dfdfdf;
}
By doing so, I can maintain a certain level of specificity that prevents my styles from affecting other components within the project.