Part 1: Page specific JS:
Check out one possible solution to page-specific JS in the rails pipeline here: https://stackoverflow.com/a/11975103/1162491
Part 2: Running JS after CSS rules are applied:
I'm assuming that your CSS is loaded in the <head>
of your application layout. At the bottom of your template, include the page-specific javascript with javascript_include_tag
and have your javascript load when the document is ready. This should resolve your issues; however, as this SO post shows, placing the stylesheet tags before your javascript tags may not always result in the expected behavior, since CSS is loaded async. So, as one answer in that post suggests,
$(window).load(function() { $('#abc')...} );
might consistently perform better than $(document).ready()
.