The way I use it, and think about it, is that anything in the global scss file applies across the whole site and this is generally things like variables, grid, layout, and basic styles. It should be styles that aren't very specific, sort of like your baseline.
For each component, when you write a scss file for it and the styles are nested inside the component class name, it shouldn't affect anything else other than that one component. This is what makes it modular.
In your component scss file, you might want to overwrite something that has been set in the global stylesheet, and that's completely fine. As long as it is nested inside your component class name then it should only affect that one component.
Does that make sense?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
The way I use it, and think about it, is that anything in the global scss file applies across the whole site and this is generally things like variables, grid, layout, and basic styles. It should be styles that aren't very specific, sort of like your baseline.
For each component, when you write a scss file for it and the styles are nested inside the component class name, it shouldn't affect anything else other than that one component. This is what makes it modular.
In your component scss file, you might want to overwrite something that has been set in the global stylesheet, and that's completely fine. As long as it is nested inside your component class name then it should only affect that one component.
Does that make sense?