作者acosy (acosy)
看板Web_Design
标题[问题] 快速修改css样式表
时间Tue Jun 26 08:41:27 2018
我在页面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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1529973691.A.4E9.html
1F：→ dododavid006: 直接用 querySelectorAll('[class]') 然後都加上 06/26 09:55
2F：→ dododavid006: pageB 再把结果存起来就行了 06/26 09:55
3F：→ dododavid006: 然後我推完才发现是要加在 css 上 那就用 scss 用个 06/26 09:57
4F：→ dododavid006: .pageB 把全部包起来 再编成 css 吧 06/26 09:57
5F：→ dododavid006: postcss 也有 postcss-prefix-selector 06/26 10:00
6F：推 ymcheung: 我会把 a 和 b 页共用的样式做成 @mixin 06/26 13:05
7F：→ ymcheung: 然後取不同的 classname，@include 该 mixin 06/26 13:06
8F：→ ymcheung: (觉得这就是 CSS 的特性，就是这麽麻烦) 06/26 13:07
9F：推 Gaitz: 好奇 webpack 能不能做到 css 模组化？ 06/28 17:15
10F：推 alice822: Styled-component 06/30 09:22
11F：→ dododavid006: webpack 可以用 css module 07/01 12:21