[問題] 快速修改css樣式表

[acosy (acosy)]

我在頁面A.html中的main這個div，想要載入頁面B.html。

頁面a跟b的css是不同的樣式，不必一致，但不可互相影響。

目前的作法是用jquery來load html及append外部css到頁面a的head裡。

這麼做，css會產生衝突。


所以，我想問的是：

一、有沒有更好的辦法，可以避免衝突？
二、目前想到的作法是在頁面a的main這個div指定一個class，比如叫pageB，
然後在頁面b的css檔的每條規則前面加入 pageB，用來做繼承判斷。
如此一來，main這個div裡的css就只會套用有pageB前綴的規則。

不過，在頁面b的css檔的每條規則前面加入 pageB 也挺累的，
有沒有比較快的方法？

謝謝！




--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.216.97.158
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1529973691.A.4E9.html
→ dododavid006: 直接用 querySelectorAll('[class]') 然後都加上
→ dododavid006: pageB 再把結果存起來就行了
→ dododavid006: 然後我推完才發現是要加在 css 上 那就用 scss 用個
→ dododavid006: .pageB 把全部包起來 再編成 css 吧
→ dododavid006: postcss 也有 postcss-prefix-selector
推 ymcheung: 我會把 a 和 b 頁共用的樣式做成 @mixin
→ ymcheung: 然後取不同的 classname，@include 該 mixin
→ ymcheung: (覺得這就是 CSS 的特性，就是這麼麻煩)
推 Gaitz: 好奇 webpack 能不能做到 css 模組化？
推 alice822: Styled-component
→ dododavid006: webpack 可以用 css module