如何解决开发组件时CSS被覆盖的问题

问题：页面上的CSS覆盖了组件的CSS

你说的意思应该是页面上定义CSS，但是被优先继承，导致外部链接中的组件CSS失效

被优先继承,导致失效的原因有几个：
1.引用的样式名称冲突，比如页面内的class和组件内的class一样
2.或者使用了行内样式，如style="color:red"，这个优先级很高，会覆盖其他样式
3.页面内的命名过于简单，如class="menu"、class="nav"，因为这些是HTML5的新元素，有些组件库会做默认设置

解决方案

其实想要避免这些问题很简单

1. 代码编写规范，不使用行内样式
2. 编写样式时，采用模块化的命名规范，这里引荐Alice的命名规范，比如：

HTML

<div class="ui-box">
   <h3 class="ui-box-title ui-box-title-hover"></h3>
   <p class="ui-box-conent"></p>
</div>

CSS

.ui-box {}
.ui-box-title {}
.ui-box-title-hover {}
.ui-box-conent {}