Railsでcontrollerやview毎にCSSを分ける

Ruby

自分用メモ。

画面固有のスタイルは個別のファイルに書くようになっているわけですが、そのままの設定だと結局どの画面からも全部のファイルが読み込まれてしまい、セレクタがかぶらないように気を遣わないといけません。これだったら同じファイルに書く方が管理しやすいですね。

そこで、コントローラ毎にCSSを分ける方法の登場です。

一つ目の方法はyieldにパラメータをつける方法。まずは自動で読み込まれないようにするためにapp/assets/styleshet/application.cssから以下の行を消してきます。

*= require_tree .

そしてlayouts/application.html.erbで

<%= yield :css %>

と書いておいて、Viewで

<% content_for :css do %>
  <%= stylesheet_link_tag controller.controller_name %>
<% end %>

と書くと、コントローラ名に対応したCSSファイルを読み込むことができます。

もう一つの方法は、CSSは全部読み込ませてしまう方法。レイアウトには次のように書きます。

<body class="<%= controller.controller_name %>">

そしてCSSのファイルというかSCSSファイルの中では次のように書きます。

.コントローラ名 {
  スタイルをいろいろ書く
}

この書き方はSCSSだったら良いですけど、CSSで同じことをやろうとするとかなり面倒ですね。こちらの方法はAsset Pipelineが有効に使えるのでRails 3.1からはこの方法がよいかもしれません。