全局CSS库样式相互覆盖，如何避免自定义元素样式被影响？

• 利用PrimeFaces组件原生属性做局部隔离
  所有PrimeFaces组件都支持style和styleClass属性：内联style优先级仅次于!important，可直接用于单个元素的样式定义，不会被全局类覆盖；你也可以给新增模块的最外层容器绑定唯一自定义类，比如custom-module-xxx，后续所有新样式都带上该父类前缀，即可保证样式仅作用于你的模块，且优先级高于无父类的全局样式，示例：

/* 你的自定义样式，优先级远高于全局的.ui-input-text */
.custom-module-xxx .ui-input-text {
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

• 使用all: unset做全量样式重置
  如果需要让某块元素完全不受现有全局样式影响，可给该元素绑定包含all: unset的自定义类，该属性会清空所有继承、全局设置的样式规则，重置为浏览器初始值后再自定义样式即可完全避开覆盖问题，示例：

.isolate-block {
  all: unset;
  /* 下方写你需要的自定义样式 */
  display: flex;
  width: 100%;
  padding: 16px;
}

使用时直接将类名填入对应组件的styleClass属性即可生效。

• 调整优先级规则兜底
  首先确保你的自定义样式文件是在所有全局CSS、PrimeFaces原生CSS之后引入，相同选择器后引入的样式优先级更高；如果仍有覆盖问题，可通过叠加类名提升选择器权重，必要时可在带模块前缀的自定义样式中加!important，仅作用于你的模块不会污染全局。
• 自定义组件结构彻底隔离
  如果PrimeFaces原生组件的内置类被全局样式污染严重无法修改，可通过组件的facet插槽自定义内部结构，或给单个组件指定自定义渲染器，生成带唯一前缀的DOM结构，完全避开全局样式的选择器匹配范围。

注意：如果现有全局样式大量滥用!important，仅需要给你带模块前缀的高权重选择器也加上!important即可，优先级会高于全局的同规则!important，不会影响其他模块。

内容的提问来源于stack exchange，提问作者Terraya