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

プログラミング 美徳の不幸

Ruby, Rails, JavaScriptなどのプログラミングまとめ、解説、備忘録。

railsのassetsについて言っておきたい

Railsのassetsの運用をちゃんとできてる人があまりに少なくてブチ切れそう。
まず基本的なことだけど、blogs.css.scssとかcomments.css.scssみたいに、controller単位でcssが勝手に作られるけどこれは全部読み込んでください。
つまりapplication.css.scssでrequire_tree .とかなんでもいいから全部読むようにして、基本的にstylesheet_link_tagにはapplicationだけ渡すこと。(それもlayoutファイルで)

よくRailsサイドでどのstylesheet読むかいろいろ判定するみたいなことしてるケースあるけど、そもそもassetsとはapplication.css.scssみたいなのをプリコンパイルしてよろしくやっちゃおうという仕組みなので、分割してゴニョゴニョってちょっとバッドパターンです。

ここまではRailsのデフォ機能をそのまま使うことなので問題ないけど、あまりできてないのはstylesheets間のnamespaceを区切ること。

comments.css.scssでいきなりh1 { font-size: 15px; }とか書いてcommentのページのh1にスタイルあてても、今度はblogとか別のページのほうで影響出るわけです。

なのでこういうのはhtmlタグにでもcontroller_name,action_nameあたりがクラス名になるようにして定義して(%html{ class: "#{controller_name}_controller #{action_name}_action" }みたく)、各stylesheetsではこのnamespaceに基づいたスコープ内でいろいろ処理してください。

.blogs_controller {
  &.edit_action {
    h1 {
      font-size: 15px;
    }
  }
}

こういうnamespaceがないせいでマジで保守性が悪いcssができあがり、ちょっと変更したら全然違うページに影響出るみたいなことになってしまうわけです。

そうすると今度、各ページごとに共通して使っているウィジェットというかパーツみたいなののスタイルはどうするんだと、こういう議論になります。例えばcommentはblogページにもauthorページにも、hotentryページにもあるとしましょう。

そうするとcomments.css.scssでグローバルなclassとか定義しがちなんですが、これもやめましょう。
一番いいのはstylesheets/shared/widgets/_comments.scssみたいなファイルを作って、これをblogs.css.scss, authors.css.scss, hotentries.css.csssの各namespace内でimportすることです。

.authors_controller {
  &.show_action {
    @import 'shared/widgets/comments';
  }
}

で、sharedとかはapplication.css.scssでは読まないようにするわけ。

だからapplication.css.scssはrequire_tree .じゃなくてrequire_directoryにしてsharedとかutilsみたいなやつは読まないようにしたほうがよい。

と、こういう保守計画がないコードを保守する苦しみをぶつけるエントリでした