It is a good idea to break your style sheets down into sensible chucks for ease of maintenance.
Start with the most general styles first. These include styles that are applied to the body tag and should be inherited by everything on the site. Next are any global resets we may need, followed by links, headings, and other elements.
Once the general styles are covered, we start to get a little more specific and tackle our helper styles. These are general classes that are used across the site and include things like forms and error messages. We then move onto structural elements like layout and navigation.
Moving through the style sheet, we slowly layer styles on top of each other, getting more and more specific as we go. Now that the page furniture is out of the way, we turn our attention to page-specific components. Lastly we include any overrides and exceptions at the bottom of the document.
The whole document structure ends up looking like this:
- Body styles
- Other elements
- Notifications and errors
- Consistent items
- Headers, footers, and navigation
- Other page furniture
- Individual pages
I use a large, stylized comment block to visually separate each section:
/* @group general styles
/* @group helper styles
/* @group page structure
/* @group page components
/* @group overrides
Not everything naturally falls into a well-defined block, so some judgment is required. Keep in mind that the more you can break up and objectify your code, the easier it is to understand and the quicker you can find the rules you are looking for.