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

Question

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

Answer 1

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

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

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

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

解决方案

其实想要避免这些问题很简单
1. 代码编写规范，不使用行内样式
2. 编写样式时，采用模块化的命名规范，这里引荐Alice的命名规范，比如：

HTML

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

CSS

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

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 5

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

使用 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，理解了这三个概念，用起来得心应手。

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

Answer 6

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