What is the best practice for adding custom CSS to a theme?
SXA structures CSS files per component. So, if you style is component specific (and majority of your CSS should be) you need to create one file per component. Give this file the same name as your component have with component- preffix.
For global styles you can extend existing main.css.
In both these cases, your CSS files should be located in -\media\Project\SXA-Tenant\SXA-Site\SXA-Theme\styles folder.
Files from this folder are imported back into Sitecore, added as media resources and rendered in MVC Layout using AssetLinksGenerator.GenerateLinks method.
That method internally executes assetService pipeline. You can add your processor into it to implement custom logic.
How do I use the "Add-your-css-classes-here"?
You should add your custom class after add-your-css-classes-here keywords inside class attribute.
That part works out of the box for components. After you Import your design back to Sitecore two things happen:
- Your class registered as SXA style for current site. You can find it in
/sitecore/content/Sxa Tenant/SXA Site/Presentation/Styles - Style is assigned to Component.
Import for <body> styles does not work with default scaffolding in SXA 1.1. I created separate post describing little tweak that solves that issue - http://sitecore.stackexchange.com/a/2693/633
What css files would I use to modify site-wide settings, such as an image in the body of the page?
As I mentioned above you can extend existing main.css.