Rails Precompiling Assets - Best Practice for responsive css

Question

These are the styles my page include (the top ones return get errors on production)

<link href="/assets/foundation.css" rel="stylesheet" type="text/css" />
<link href="/assets/app.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

<link href="/assets/application-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/application-cd6a361c13ee838fceb09ecb2c58c467.js" type="text/javascript"></script>

My website is responsive so I want the styles to be included as they are needed based on the screen's size. Is there a way to precomplie my css separately so that it looks like this:

<link href="/assets/foundation-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/app-b0a44b2bbc0d3c94d855fbb830c2098d.css" rel="stylesheet" type="text/css" />
<link href="/assets/full_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (min-width: 761px)" rel="stylesheet" type="text/css" />
<link href="/assets/mobile_size-b0a44b2bbc0d3c94d855fbb830c2098d.css" media="screen and (max-width: 760px)"   rel="stylesheet" type="text/css" />

Then there would be no need for application.css, also combining it all breaks my css. My website looked good in development :)

for now ive set config.assets.enabled = false in the config/application.rb, would it be a better idea to compress the css and it include it manually on my own?

This is somewhat similar to this question except I don't like any of the answers. Surely there is a simple solution to this. Using Rails 3.1 assets pipeline to conditionally use certain css

Answer 1

I think you are taking a wrong direction for using the asset-pipeline in general . If you are about to use the pipeline , you just have to keep the application.css - this is a manifest file , that you use to include your css files . My advice is to move your link href= from view and use the manifest file (application.css) like this :

*= require_self
*= require foundation
*= require mobile_size

....
*= require_tree

What you are including now are precompiled css files (notice the hash prefixes) and every time you modify your assets , the hash prefix will change .

The same is the situation with .js files - you have to include them in application.js manifest file .

EDIT : The idea of using SASS (3.2) and media-queries (as described in this CSS-tricks article, regards to @penner) would fit nicely in this case.