Each to their own
The way you format and order a stylesheet can change from project to project. Indeed there might even be a set in stone house style that you must adhere to in a certain job.
However when I have the freedom to set out my own formatting I like to stick to the following rules.
First up you should place your reset CSS and any global styling you want to do to the body.
font-family: 'Abel', sans-serif;
This gives you a global base style right away that you can work on you go down the stylesheet. (After all the C in CSS stands for cascading.)
Then I like to style all the main HTML elements, header, nav, h1, div, p, a etc.
margin: 0 auto;
Again you are working in a top down order. Almost backward to how CSS priority works. (Base elements have a lower priority than classes and id’s, and so should be defined first.)
Up next should be classes that are general use site-wide, for example, I usually have classes, for certain defined widths and alignemnts.
margin: 0 auto;
Now normally a lot of developers will simply continue in this vein, all classes, all id’s and then unique selectors like elements within a class, or elements within an id.
However I like to style the unique elements (Mostly Id’s but some classes) by site sections.
So after getting the global elements and classes out of the way. I will now seperate my stylesheet, by Page, and page section. For example, Home title, Home splash, home contact etc.
/*---------------- TOP NAVIGATION BAR -----------*/
margin: 22px 0 0 33px;
/* Hidden Menu Icon For Mobile */
backgrond: url(img/nav.png) center no-repeat;
This allows me to style the unique elements in an order that makes sense, and is easy to locate in the file.
One final tip that i highly recommend is to order your CSS attributes within an element in alphabetical order. This mean that is an element has a lot of styling content, it is super simple and quick to find the attribute you are looking for to make the edit.
margin: 63px auto;
It makes a big difference as you can see from the example above, allowing the developer to find the attribute they are looking for easily.
Thats it for this entry, I hope it helped!