Webサービスを作って潰すのが趣味な人のブログ

とりあえず作ってから怒られよう

【Rails】cssの読み込み順序を指定するいくつかの方法

http://www.flickr.com/photos/18155385@N00/110995239

photo by geirarne

主に「reset.css」や「normalize.css」、最近では「sanitize.css」などなど、先に読み込みたいcssが存在する時ってありますよね。何も考えずにデフォルトの「Rails.root/app/assets/stylesheets」に突っ込んでしまうと読み込み順序によって望まないスタイルの効き方になってしまうこともあります。

ということで、それを避けるためにCSSを指定した順番に読み込むいくつかの対処法をメモしておきます。

 

※関係ないけど、現在どのResetCssが人気かは以下のサイトで確認できます

cssreset.com

 

「application.html.erb」で直接指定する

publicフォルダに置いて、他のCSSよりも先に読み込むのが一番直感的でわかりやすい対処法ですね

「Rails.root/public/reset.css」あたりに読み込みたいcssを設置して以下のように書けば指定通りの順序で読み込むことが出来ます

gistadeadc4736580ce19cdd

 

ただしこの方法はあまりおすすめできません。

  • assets piplineに乗らない
  • scssが使えない
  • 変更しても自動で再読み込みされない

絶対に変化しないCSSで逆にassets piplineにのせたくないということであれば置いても良いのかもしれませんが……おすすめはしないですね

 

ファイル名を数字にかえる

application.cssで自動結合される順序は以下のようになっています。

  1. 「0〜9」
  2. 「a-z」

おそらくcssのファイル名を数字で始める人はいないと思うのであえて数字で始めればそのファイルを絶対に最初に読み込むことが可能になります

 

例えば「reset.css」「page.css.scss」「user.css.scss」の3つのファイルがあった場合読み込まれる順序は以下のようになります

  1. page.css.scss
  2. reset.css
  3. user.css.scss

 

reset.cssを先に読み込むためにreset.cssのファイル名を数字で始まるように変更します。そうすると読み込み順序が以下のようになります

  1. 0_reset.css
  2. page.css.scss
  3. user.css.scss

 

これもおすすめはしませんが、最初に書いた「publicに置く」という対処法より多少はマシだと思います

 

「application.css」で順番を指定する

正攻法

gistcaee369e9efc7be8b881

先に読み込みたいものを指定してやれば他のファイルよりも手前で読み込んでくれます

特に理由がないのであればこれを使うのが一番いいですね