CSSファイルを個別に分けたい！

前提・実現したいこと

個人アプリ開発中

rails特有の全てのCSSファイルを読み込まず、それぞれ個別に読み込みたいです。
そのやり方を教えてくたださい！

###なぜ個別に分けたいのか
各ページのヘッダーをページごとで変えたいと考えています。
今のままだとclass名が被ってしまいそれぞれのページごとにclass名を変更するのが少し手間だと感じたのと
今後JavaScriptで動きのあるサイトを作りたいのでその時にも個別に分けている方がわかりやすいかなと感じた為です。
後Railsの理解を深めるためにもちょっとやってみたいと思っています。

###行ったこと
様々な記事を読み実行しましたが上手くファイル別にすることができませんでした。

【Ruby on Rails】ページごとに、読み込まれるCSSとJavaScriptを変えるには？(Rails5まで)

【Ruby/Rails】CSSをページごとに使い分けたい
この記事は、とても分かり易かったです
この記事の

####app/views/layouts/application.html.erb

html
1<body class='<%= controller.controller_name %>'>
2   <%= yield %>
3</body>

を記述まではわかりました。
その後の

あとは、CSS側で以下のように切り替えできます。

// hoge_controllerに対するスタイル
.hoge {

}

// fuga_controllerに対するスタイル
.fuga {

}

#####このhoge_controllerに対するスタイルってなんだ？
#####fuga_controllerに対するスタイルってなんだ？
となり

Ruby on Rails で controllerごとにcssの読み込みを行う
を読みCSSをコントローラー名をもとに作成したら良いと理解しました。
しかし、実際どのような名前をつけたら良いかわかりません。。

####他に良い方法があったら教えてください！皆様のお力をお貸しください…

no1knows

2020/10/12 03:20

> rails特有の全てのCSSファイルを読み込まず、それぞれ個別に読み込みたいです。なぜそのようなことをしたいのでしょうか？

EleAco

2020/10/12 03:43

no1knowsさんご質問ありがとうございます本文にて追加で記述しております！よろしくお願いいたします！

行動規範の内容に同意します

回答1件

ベストアンサー

前提として、よほどの理由がないかぎり、CSSを個別で読み込むことは無いかと思います。

今のままだとclass名が被ってしまいそれぞれのページごとにclass名を変更するのが少し手間だと感じた

上記のような理由は、「よほどの理由」には当てはまらず、そもそもCSSの設計が適切でない可能性が高いです。
具体的には、同じCSS名であれば、どのページでも同じ挙動にしてあげると色々とスムーズになるので心がけたほうが良いかと思います。

また<body class='<%= controller.controller_name %>'>とするのは、特定のページで別のスタイルを割り振りたい時の適切なアプローチの1つだと思います。

〜具体的な使い方〜

例えばPostsコントローラーのページのヘッダーだけ背景を黒にしたいとします。
その場合、ページ（例:example.com/posts/newなど）を開いたときに<body class="posts">という形になっています。
そのためCSS側では.posts header{background:#000;}とするとPostsコントローラーのヘッダーの全てのページが黒色になります。

投稿2020/10/12 05:55

no1knows

総合スコア3365

EleAco

2020/10/12 07:05

no1knowsさんご回答ありがとうございます！そもそもその考えがあまり良くなかったのですねw 確かに一部のclass名を変更すればあとは前作成したヘッダーのclass名にすれば記述も少なく綺麗に見えますね具体的な使い方までありがとうございます！ <body class'<%= controller.controller_name %>'>のcontroller_nameっていうのはコントローラーの名前をそこに記述するのでしょうか、それともそのままcontroller_nameであっているのでしょうかごめんなさい自分の理解が追いついておらずページを開いた時<body class="posts">っていうのは検証ツール等で確認出来たりするのでしょうか… 自分の方ではどのような感じになっているか確認が行いたくて…

no1knows

2020/10/12 07:10

<%= controller.controller_name %>は、そのままで大丈夫です。 Rails側で表示されたページに合わせてコントローラー名に変換してくれます。なので、layouts/application.html.erbにある<body>を<body class='<%= controller.controller_name %>'>に書き換えれば大丈夫です。検証ツールで確認できます。これを使いこなせないと開発がまったくといっていいほど進まないので、下記ページなどを参考に勉強してみてください。 https://saruwakakun.com/html-css/basic/chrome-dev-tool

EleAco

2020/10/13 00:52

no1knowsさん検証ツールのことまでありがとうございます！！本来の質問とは別の内容になってしまいましたが助かりましたまたよろしくお願いいたします

no1knows

2020/10/13 00:55

ゆくゆくは下記のやり方も必須になるので、時間のあるときに最初から見てみてください。 https://www.youtube.com/watch?v=5fyrGslhUcY&t=596s （なぜか途中からの再生リンクしか張れない。。）

行動規範の内容に同意します