[问题] 快速修改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