如题
来来；引入一个css命名空间的概念；
比如说我叫baijunyao；我写的所有css都会带上个bjy-前缀；
什么？我自己搞了一大堆插件；然后导致了css冲突？
那日期插件用:bjy-date-;
弹框插件：bjy-alert-;
什么？你还要搞多人团队开发？有个叫张三的程序猿？
那他就以zs-为前缀吧；
张三的日期插件：zs-date-；
张三的弹框插件：zs-alert-;
这样命名有什么好处？恩；好吧；最方便的一点就是；随时知道这段html和css是谁写的；
当出现问题的时候；能最快找到对应的程序猿去调试；
-----------------------不怎么华丽的补充线--------------------------------
好吧；上面已经可以避免了自己写的css和插件的css冲突；
也可以避免了自己和一起开发的小伙伴直接的css冲突；
应题主的追问；
那么下面再来讲自己css和自己的css怎么避免冲突的问题；
首先声明；我并不是一个专业前端不是权威；纯属个人经验；仅供参考；
有说的不对的地方；轻拍砖；
可以看下面的代码；
这短短的三段代码；饱含了我与冲突做斗争的心血结晶；
结合上面的以人名做命名空间的bjy-;
子级标签class都带上父级的第一个字母；
bjy-red是最外层；那么它的子级div我本来是想起box的；
但是那这时候我起的是bjy-r-box
孙子级我本来是想起inside的
但是我这时起的是bjy-rb-inside;
rb是red、box中的首字母；
rs就是red、sack的首字母；
这样bjy-red 里面有两个inside；但是因为有前缀bjy-rb-和bjy-rs-；
所以是不可能冲突的；
开发中即便不考虑css本身也是有层级的；单靠命名就很难冲突了；
每个页面；只需要注意最外层的div的命名；基本上都能避免；
<div class="bjy-red">
<div class="bjy-r-box">
<div class="bjy-rb-inside"></div>
</div>
<div class="bjy-r-sack">
<div class="bjy-rs-inside"></div>
</div>
</div>
<div class="bjy-blue">
<div class="bjy-b-box">
<div class="bjy-bb-inside"></div>
</div>
</div>
<div class="bjy-green">
<div class="bjy-g-box">
<div class="bjy-gb-inside"></div>
</div>
</div>
.bjy-red {
background: red;
}
.bjy-red .bjy-r-box {
background: red;
}
.bjy-red .bjy-r-box .bjy-rb-inside {
background: red;
}
.bjy-red .bjy-r-sack {
background: red;
}
.bjy-red .bjy-r-sack .bjy-rs-inside {
background: white;
}
.bjy-blue {
background: blue;
}
.bjy-blue .bjy-b-box {
background: blue;
}
.bjy-blue .bjy-b-box .bjy-bb-inside {
background: blue;
}
.bjy-green {
background: green;
}
.bjy-green .bjy-g-box {
background: green;
}
.bjy-green .bjy-g-box .bjy-gb-inside {
background: green;
}
-----------------------再来个不怎么华丽的补充线--------------------------------
@霁无暇
无暇兄说的对；其实从css层级上来说；只需要最外层的div加上命名空间；最外层不重名就已经足够避免css冲突了；
下面来说说我自己的开发体会；
必须再次强调；我非专业前端；都是些个人经验；
首先我要说的是；前端中、js和html有注释是应该的；但是在css中写注释；以后靠注释去找样式改样式；这个有点扯；因为不可能每一行css都写上注释；大量经验告诉我；当页面出现问题后；最快的解决方法是；复制出问题的class名；然后直接去css文件中搜索；
比如说我html中有个叫bjy-inside的div飞了；当我去css搜的时候；结果无数个bjy-inside；天那；我那知道那个是飞了的bjy-inside；
我之所以会在子级css中加上上一级的首字母；是为了避免css中有重复的命名；即便是不会因为css冲突；
可以看到；我根据父级div的class；我是把bjy-inside分别命名为bjy-rb-inside、bjy-rs-inside、bjy-bb-inside、bjy-gb-inside
当然；不能不可能完全绝对的避免class名重复；但是基本上；在css文件中随便搜一个class名都能立即定位到某一行；方便迅速的改了；
楼上解释的很详细，
解决css冲突只能通过命名空间解决。
只是不需要.bjy-red .bjy-r-sack .bjy-rs-inside 这个样子。
根据需求 外层加命名空间就好。