A few notes I have observed about how Roots loads CSS. It loads the files in this order:
- css/bootstrap-responsive.css (optionally, if BOOTSTRAP_RESPONSIVE is set to true in inc/roots-config.php)
These are my preliminary observations, but it's clear that you want to edit the CSS files in Roots in a nicely structured way.
css/style.css I think this is mostly the HTML5 Boilerplate stuff, maybe some other setup stuff? You probably wouldn't want to touch this.
css/bootstrap.css, and css/bootstrap-responsive.css Note here, that these files come from Twitter Bootstrap, and are compiled by pointing a LESS compiler at css/less/bootstrap.less and css/less/bootstrap-responsive.less. You might never need to change these files. If you did, it would be far nicer to study up a bit on LESS, make changes in the .less files, and recompile them. There are mostly just a handful of @variables that you would want to change, and if you do it this way, according to the way Bootstrap is set up to work, you will have a very nice, organized process. The main things you'd change here are layout options and color settings. (There are a number of free LESS apps you can download to recompile the files.)
css/app.css This is a very nicely structured standard CSS file, with sections for Base, Header, Content, etc. Here, you'd just want to try to keep your CSS nicely organized into the sections provided.
I am finding that if I approach it in an orderly way, and understand how Roots is structuring things, it is really a very nice system.