同一ページ内で違うcssを参照することは可能なのでしょうか？

bootstrapのテンプレート（スニペット？）を利用して、デザインを作りたいのですが、
例えば、posts/index.html.erbの同一ページ内に

このテンプレートと

このテンプレートを使いたい

となった時に、それぞれhtml,css,jsのコードが用意されていて、片方だけならコピペで使えますが、両方のcssをapplication.cssに記述してしまうと、おそらく命名の関係からレイアウトが崩れてしまいます。

このな時に、同一ページ内で違うcssを参照することは可能なのでしょうか？

例えば
posts/index.html.erb内の
nabvarはindex_navbar.cssを参照して、すぐ真下のfooterはindex_footer.cssを参照すると言うようなことです。

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

回答1件

画面全体にではなく、navbar部分にはindex_navbar.css
footer部分にはindex_footer.cssだけしか反映させないというパターンであれば実現可能かもしれません

index_navbar.css

p{
 color: #ff000;
}
.cls{
 text-align: center;
}

要素の頭全てに識別子をつける

.navbar p{
 color: #ff000;
}
.navbar .cls{
 text-align: center;
}

index.html.erb

<div class="nabvar">
~nabvarをすべて囲うように配置
</div>

これをnavbarとfooter部分にすべて行えばhtml,cssともに同じ名前のclassが存在しても問題ないはずです。
要素の頭全てに識別子をつけるのはテキストエディタの置換機能を使ってくださいませ。
ナビバーにアニメーションがあるならjs部もいじらないといけないかもしれませんが。

投稿2018/04/05 12:29

wp-h

総合スコア135

maisumakun

2018/04/05 12:40

scssにして、ブロックをネストする、という手段もあります。

renren643

2018/04/06 01:34

回答ありがとうございました。ふつう、そういった同一ページ内の違う部分で適応したいときはみなさんどうされているのでしょうか？今回の例にあげたようなスニペットがコピペでできなきゃあまり意味がないと思うのですが。。。

maisumakun

2018/04/06 02:05

> 今回の例にあげたようなスニペットがコピペでできなきゃあまり意味がないと思うのですが。。。それは、手を抜きすぎかとおもいます。

wp-h

2018/04/08 23:23 編集

> 今回の例にあげたようなスニペットがコピペでできなきゃあまり意味がないと思うのですが。。。デザイン部に関してはなるべくリソースを割きたくないということであれば nabvarとfooterを適用したい箇所だけ別htmlにして親ページのhtmlにiframeで読み込む様にすればindex.htmlに影響を与えることなく実装が可能です。やり方がスマートでないですが。以前とあるサイト構築で似たようなことを依頼されたときにはこれで乗り切ったことがあります。なお　iframeは同一ドメイン内でのみ許可する設定が望ましいです。