如何解决开发组件时CSS被覆盖的问题-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

杨冬芳 2016-05-31 12:02:57 1708

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

前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:21:46

    问题:页面上的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 {}
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程