For a while now I have been considering the formatting of sass files to maximise their usability by other coders and I think that this would be perfect place to get some feedback on the rules I try to apply when writing a sass file. I am specifically interested in the usability of the source code as it is created and maintained by humans, as well as with the correct creation of css code. Some of these rules could be applied to sass or vanilla css.
The rules I have been honing are as follows:
Start general and get specific. So start with body font size, colour variables, default tag declarations etc. then move through the parts of your site that are common to all pages, then onto the re-usable elements on the site and finally concluding with page specific styles, with the liklihood of cascading re-use and the potential for over-ridden styles increasing as you move through the document(s)
Try to group selectors in a way that matches the distribution of html amongst views. So if I look at widget.view the file or block of a file labeled widget.scss will contain those styles. NB, I specifically do not mean following html sructure with hierarchical sass in this case.
Following on from that. Minimise the amount of hierarchy defined in sass. Only use sassy {} based inheritence when needed.
Group properties into logical sets, so width and height together, font declarations together, rather than everything alphabetically.
Always consider the resulting css file size and be prepared to use classes if necessary instead of mixins, editor snippets or other bloat encourgaing techniques.
Put more than one property per line in certain cases, following on from the logical grouping of elements, meaning more code can be fitted onto a monitor screen without going so far as to make lines too long to read easily. No more than 3/4 properties per line.
Block code in files by indenting all selectors after an introductory comment to make the the left hand side of the file easy to scan and to quickly discover it's contents. Also provide a file map of these blocks at the top of the file if it is large.
Use placemarkers for find operations, such as ^NAVIGATION
Only use classes for styles. And don't be afraid to use classes for specifcity and to make re-use more atomic. [edit for clarity - I don't mean use only classes, I mean use classes instead of IDs]
Use a completely separate set of javascript specific classes for binding functionality to html elements, meaning that either form or function can be swapped out without damaging the other. These classes are not refered to in the css.
Selectors one per line and in alphabetical order as they are arbitrary in name