Where to Put the File?

On large projects, you don't keep all CSS in one file. You split it into small pieces by meaning.

Popular Structure (7-1):

1. Base/: Style reset, typography.
2. Components/: Buttons, forms, cards (main part).
3. Layout/: Header, footer, grid.
4. Pages/: Styles only for specific pages.
5. Themes/: Dark/light themes.
6. Abstracts/: Variables, mixins (what doesn't output CSS code).
7. Vendors/: Third-party library styles.

Result: In main file main.css, you simply import all these folders. Finding the right style now takes a second!