読者です 読者をやめる 読者になる 読者になる

Rails Webook

自社のECを開発している会社で働いています。Rails情報やサービスを成長させる方法を書いていきます

RailsでCSSスタイリングをコントローラー単位で分けるTips

Rails Tips

Railsでは複数のSCSSファイルをCSSにコンパイルし、1つのファイルにまとめる機能があります。こうすることでサーバーとブラウザの通信回数が減るため速度はあがるのですが、CSSスタイリングのCSSの名前空間が衝突して、意図しないCSSの動作となってしまうことがあります。

そのため、ハック的ですがCSSの名前空間の衝突を防止するために、RailsでCSSスタイリングをコントローラー単位で分けるTipsを説明します。


動作確認

  • Rails 4.1

1. bodyタグのclass属性にコントローラ名をつける

次のようにして、レイアウトファイルのbodyタグのclass属性にコントローラ名を設定するようにします。

# app/views/layouts/application.html.erb
<body class='<%= "#{controller.controller_name}" %>'>


こうすることで、

  • UsersControllerにアクセスすると、body class="users"
  • ProductsControllerにアクセスすると、body class="products"

とコントローラーごとにclass属性の値を変更できます。



2. SCSSを記載する

SCSSは階層構造に記述することができる機能を利用して、コントローラ名を一番最初に記載することでCSSのスタイリングの適用範囲を狭めることができます。

.products {
  # ProductsControllerで表示するビューのスタイリングを記載
}

.users {
  # UsersControllerで表示するビューのスタイリングを記載
}


では、実際にスタイリングを記載してみます。
まず、Product側のスタイリングを記載します。

# app/assets/stylesheets/products.css.scss
.products {
  background-color: green;

  h1 {
    color: yellow;
  }
}


次に、User側のスタイリングを記載します。

# app/assets/stylesheets/users.css.scss
.users {
  background-color: blue;

  h1 {
    color: white;
  }
}

3. 画面の確認

商品一覧画面を表示します。背景が"緑色"、h1タグが"黄色"になっています。
f:id:nipe880324:20141206150946p:plain:w420


商品一覧画面を表示します。背景が"青色"、h1タグが"白色"になっています。
f:id:nipe880324:20141206151025p:plain:w420


以上です。