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

作者: acosy (acosy)   2018-06-26 08:41:27
我在頁面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 也挺累的,
有沒有比較快的方法?
謝謝!
作者: dododavid006 (朔雪)   2018-06-26 09:55:00
直接用 querySelectorAll('[class]') 然後都加上pageB 再把結果存起來就行了然後我推完才發現是要加在 css 上 那就用 scss 用個.pageB 把全部包起來 再編成 css 吧postcss 也有 postcss-prefix-selector
作者: ymcheung (ymc)   2018-06-26 13:05:00
我會把 a 和 b 頁共用的樣式做成 @mixin然後取不同的 classname,@include 該 mixin(覺得這就是 CSS 的特性,就是這麼麻煩)
作者: Gaitz (喵喵喵)   2018-06-28 17:15:00
好奇 webpack 能不能做到 css 模組化?
作者: alice822 (梅露)   2018-06-30 09:22:00
Styled-component
作者: dododavid006 (朔雪)   2018-07-01 12:21:00
webpack 可以用 css module

Links booklink

Contact Us: admin [ a t ] ucptt.com