I have my SCSS files organised by components. E.g.I have component for page header and I have alongside SCSS file with styles for that. The styles are link to the component file and extracted and merged during build.
Then I have file with root styles (to reset html/body etc) and file with variables (mainly colours).
As such I keep every file as simple as possible (have lint rule to allow max 3 rule nesting and many other rules for company coding standards).
Generally, when the SCSS file is too big, is too big the component itself -> time for refactoring and breaking to multiple smaller components.
And in webpack, we have it set during development for hot reload, so I can change any SCSS file and it is immediately updated in the browser. With the right naming of the file too, so I know, where the css rule origins.
I have my SCSS files organised by components. E.g.I have component for page header and I have alongside SCSS file with styles for that. The styles are link to the component file and extracted and merged during build.
Then I have file with root styles (to reset html/body etc) and file with variables (mainly colours).
As such I keep every file as simple as possible (have lint rule to allow max 3 rule nesting and many other rules for company coding standards).
Generally, when the SCSS file is too big, is too big the component itself -> time for refactoring and breaking to multiple smaller components.
And in webpack, we have it set during development for hot reload, so I can change any SCSS file and it is immediately updated in the browser. With the right naming of the file too, so I know, where the css rule origins.
Agreed.