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

页面引入组件时，页面上的CSS覆盖了组件的CSS，如何解决这种情况呢

组件的css后引入。如果权重还是没有页面的高。

建议给组件css都套上一个 id，这样比较好一点。正好也给你的组件用上同一个id.方便隔离。

这个肯定是页面的样式和组件的样式名称是一样导致的，再者就是在class或id一样的情况下组件css的优先级没有页面css对应的优先级高。
对应的解决办法就是修改页面的css和组件css冲突的部分的名称，或者把组件的css优先级调整到大于页面css的优先级。

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

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

被优先继承,导致失效的原因有几个：

引用的样式名称冲突，比如页面内的class和组件内的class一样
或者使用了行内样式，如style="color:red"，这个优先级很高，会覆盖其他样式
页面内的class命名过于简单，如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 {}

覆盖》不明白什么意思
!important加上还会覆盖吗》》》》

使用 BEM 的方式来命名你的 CSS

使用 Yandex 的工程师提出的，于 2010 年开源。随即便得到了广大前端开发者的推崇。简单来说，BEM 将页面看成由若干个区块 (block) 组成的。每一个 block 又有包含若干个元素 (element)，block 和 element 可以有自己的修饰符 (modifier) 进行限定。

举个栗子：

最常见的，在页面上有一个导航菜单，用 BEM 的方式可以写成下面这样：

HTML

html<ul class="nav">
    <li class="nav__item">
        <a href="#" class="nav__link">导航链接</a>
    </li>
    <li class="nav__item nav__item_state_active">
        <a href="#" class="nav__link">导航链接</a>
    </li>
    ...
</ul>

css.nav {}
.nav__item {}
.nav__link {}
.nav__item_state_active {}

所有的样式都扁平化了。好了，BEM 就介绍到这里，如果你感兴趣，可以在通过下方的相关链接了解更多的内容。

另外，再结合 OOCSS/SMACSS 等方法来组织 CSS 文件。

一些有用的链接

BEM 虽然推出这么多年了，但是网上的中文的资料并不太多，可能这种命名方式在国内不是那么受欢迎，单这并不代表他不好，很有可能是人们止步于用他写出来的类名太奇怪，如果真是这样，对我们来说是一种损失。OK，废话不多说，下面列出一些相关的资料，供参考。

中文资料首推 W3CPlus 的 BEM 系列 http://www.w3cplus.com/blog/tags/325.html
大知乎上曾经有一个关于 BEM 命名的讨论如何看待 CSS 中 BEM 的命名方式？
如果可以的话，去找一些英文的学习资料来看，因为中文的翻译有点跟不上
小弟不才，曾经在公司内部介绍过 BEM，拥抱 BEM。

另外，BEM的核心是 Block, Element, Modifier，理解了这三个概念，用起来得心应手。

有任何问题，欢迎留言讨论。

把组件的样式放后面;
给组件的样式加上!important;

【热门文章】