I'm always looking to learn from the best and ensure coding quality.
When it come to CSS styling within my responsive designs, my custom CSS style sheet can get a bit overwhelming. Constantly hitting ⌘ + F (Control + F) to locate my classes.
I could split sections of my classes into multiple style sheets (for example: media.css, typography.css etc...) however I believe calling into to many style sheets may jeopardise performance.
What are the best practices in keeping your CSS organised and well manageable?
Keep in mind that the file structure for production does not necessarily need to be the same as development.
Split up the files logically in development and group them together as needed for production. How the files are organized totally depends on your project. Of course, this implies that you have some sort of deployment pipeline in which to concatenate the files. This is not always feasible for small websites. There are hacky ways to glob files dynamically at runtime on the server, but that adds latency to the total request time.
One important advantage to this is reusability of common styles. You could have style libraries that are included in multiple stylesheets. When you need to change the core library, you're making the change in one place as opposed to many.