'What is the best way to have a specific css file for a specific html file?

I've strcutured my web project with sass 7-1 pattern, like this in the picture below:

enter image description here

My question is that which css file/files should I import in each individual html file, or to be precise, what css file should i have for each html file.

for exmaple: todo-list.html, should I have an idividual app.scss file, which imports neccessary scss files for each html file and then have them transpiled to a css file which is to be imported in that current html file, or; should I have a main css file which holds all of the html files styles which this current project has (a css file which hold all of the styles for entire web project, including todo-list.html styles and index.html styles together)?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source