Css属性在两个组件之间发生冲突

我有两个组件，每个组件有两个css文件。css文件导入到req组件中。问题是每个组件都有相同的类名，如果我在组件中更改css，它也会影响具有相同类的其他组件。。请帮忙。。如果您不理解我的问题，请发表评论

html{
字体系列：无衬线；
}
/* 
这条规则是不必要的↷
p{
字体系列：无衬线；
}
*/

html{
字体系列：无衬线；
}
p{
线高：1.5；
}
/* 
这条规则是不必要的↷
p a{
线高：1.5；
}
*/

关于css优先级

基本上，后面的css具有更高的优先级

!！重要信息>内联样式属性>id>类，其他属性，大写类（如：第一个子项）>标记元素，大写元素（如：：before）按优先级顺序排列

如果优先级相同，则数字越大的css优先级越高

如果不在内部且已导入，则优先级相同。 由于css的继承性和级联性，它将影响您是否定义p，即使它是不同的文件

---

还有一些css方法，如BEM、SMACSS和OOCSS。然而，这也不能解决根本问题

从诸如边界元法（BEM）和原子CSS之类的CSS方法到以编程方式封装的CSS模块，许多人都在尽最大努力避开或抑制这些特性。这使开发人员能够更好地控制他们的CSS，但这只是一种基于频繁干预的专制控制

有一些选项，如阴影dom，但polyfill也与性能问题直接相关

如果您使用的是react，我认为next's attitude在研究css时所采用的方法可能最接近我们目前所能看到的最佳方法

我希望您能看看css在下一篇文章中的划分方式

---

考虑JS解决方案中的作用域CSS，例如，您可以使用它为每个组件生成唯一的类名。ok。但为什么会出现这种情况呢？因为CSS最初设计用于用文本和一些图片为文档设置样式，而不是基于组件的复杂单页应用程序。因此，默认情况下CSS中的所有内容都是全局的。要在本地对其进行范围限定，必须使用影子DOM、iframe，或者只需确保类名不重叠。JS中的CSS方法是确保这一点的自动化方法，但您也可以尝试手动方法，例如。