Best practices for structuring CSS code

I am creating a design for a mid-sized Web application. It's my first time, and there is no established design process at my workplace. Previous projects are small internal applications, and the backend developer used a minimal design just enough to make stuff align where it should.

I started doing the design for each type of page separately, and created a new CSS file for each type of page, e.g. a separate one for input forms, another one for the search interface, and so on. I also made one large file with elements used everywhere (header, footer, buttons, warning messages and so on). It was the only reasonable structure I could think of.

I've been at it for a while, and I'm now noticing that I've created some sort of chaos. When I have an element and need to change the definition of its style, I always have to go through Inspect Element and then Visual Studio's search function, which is still reasonably efficient. But I also frequently find myself looking at definitions in the stylesheet, having no idea what they are for, or if they're still in use at all - maybe we have already thrown out the elements which use them, or they were an attempt to solve a problem which got a better solution.

I am already trying to give good, semantic names to my classes, but it's not sufficient, and sometimes even impossible - every workaround I use seems to leave me with names like .centeringWrapper.

What is a good, workable structure of CSS code which prevents these problems? What principles can I apply to arranging the code?

• How can I divide the code into files so I can find the correct file?


• How to structure code inside the files so I can keep my orientation within a file?


• How to keep the overview of different definitions for the same element which are used within different @media blocks?

Any advice for making my work less messy is welcome.