Ways to organise CSS in Rails project

I would like to know what are the best ways to organise CSS code in Rails project? I'm 开发者_如何学Gointerested in how you do it and why.

---

If you would like to break up your css into multiple files during development you can add cache => true to stylesheet_link_tag and rails will automatically concatenate them into a single file in production. This also works for javascript_include_tag.

http://guides.rubyonrails.org/layouts_and_rendering.html#linking-to-javascript-files-with-javascript_include_tag

---

Generally, you should not have the client download a massive amount of CSS snippets, but pack them into a single file on the server to avoid rendering latencies. So you have the tradeoff of having functionality divided up into multiple files put wanting to send only one file to the client.

You could use SASS to have each piece of code inside a single include file and just include all of them together. This gives you the added advantage of mixins (kind of like macros) and variables among other awesome things.

Another possibility would be to use plain CSS and use something like Jammit to pack the stuff up to send to the client.

Regarding actual setups, I tend to have one file resetting the styles to a known default, a file for the basic layout (columns, default spaces, ...), and one file each for each area of concern for your specific design (headers, buttons, ...)

---

James and Holger's answers are very good.

Besides organizing CSS in my projects, I also had to change colour schemes a couple of times.. Trying to do consistent changes throughout many CSS files can be pretty painful (results may vary).

I ended up extending the Rails start-up procedure a little, to include a custom module "site_settings.rb" through which I can define variable for colors and other CSS attributes, which I can then use throughout my CSS input files.

Whenever Rails starts up, and one of the input files has changed, it auto-generates the CSS files.

http://unixgods.org/~tilo/Ruby/Using_Variables_in_CSS_Files_with_Ruby_on_Rails.html

---

Since Rails 3.1 is out and sprockets replaced Jammit, here an excerpt form the Rails guides concerning the asset organization:

Asset Organization

Assets can be placed inside an application in one of three locations: app/assets, lib/assets or vendor/assets.

• app/assets is for assets that are owned by the application, such as custom images, JavaScript files or stylesheets.

• lib/assets is for your own libraries’ code that doesn’t really fit into the scope of the application or those libraries which are shared across applications.

• vendor/assets is for assets that are owned by outside entities, such as code for JavaScript plugins.