First Step
Begin by calculating the total weight of your CSS file after it has been minified and G-zip Compressed. If it is only a few kilobytes, consider combining all your styles into a single file. This file can then be cached on the client's machine to avoid downloading it every time the page is loaded.
Second Step
If it makes sense, isolate CSS rules for specific components that will not be reused elsewhere.
After completing these steps, you have two options:
If a component requires a large number of CSS rules, exceeding 50 lines, it may become difficult to maintain. In this case, consider using styleUrls: ['myfile.css'] to store these properties in a separate file. This makes maintenance easier, especially if you are using a CSS preprocessor. Note that the CSS file will be requested from the server each time the component is loaded in your Single Page Application.
Alternatively, for components that only need a few lines of styling, you can use styles: ['h1{color:red}'] inline. This method loads faster as it eliminates the need for additional HTTP requests to retrieve the styles from the server.