如何避免模块间的CSS冲突

2019独角兽企业重金招聘Python工程师标准>>>

在最近的推荐模块改版中，遇到了一个模块之间的样式冲突问题，特在这里记录一下自己的心得。

那是一个阳光明媚的下午，我像往常一样在工位上写代码，窗外的麻雀在电线杆上多嘴。这一天，仿佛将会像往日一样平静地过去。

突然，我的聊天工具惨叫一声：“叮咚！”是测试同学发来的消息，我知道，这一切没有想象中那么简单。屏幕中浮现出15个黑色的小字：推荐模块样式有问题。

“怎么可能？我明明仔细测试过了，不应该啊…… 不行，他一定是在骗我。”那一刻我的内心几乎是崩溃的，我开始自怨自艾，想逃离这种喧嚣，可是，责任告诉我，我不能就这么坐着什么也不做，于是我立即把状态设为隐身。

事件的起因就是推荐模块的图标样式被页面的另一个模块覆写了，添加了 padding-left： 20px; 所用的图标class为icon

另一个模块定义了 .icon 样式

仔细一看，原来是收藏夹页面的基础样式，看来是自己对页面样式环境不熟悉所致。顺便，我又查看了另一个页面，发现也有类似css样式

可想而知，如果以后要在其他页面编写区块，还会遇到这种问题。

对应页面的前端同学告诉我，你起的class名字太简单大众了，难怪会起冲突，需要加上前缀啊混蛋。

想想也不是没有道理，这样是可以在一定程度上解决这类问题，不过我还是有一些疑惑，既然这些各页面的基础样式也不是通用的，而且还有差异，为什么不充分利用派生选择器添加命名空间或者添加前缀呢？这样带来的问题就是每个区块开发者都要事先看一遍页面的基础样式，发现潜在的冲突，或者不看，测试的时候让测试同学帮忙看，或者所有class添加前缀，显得冗余。

我觉得多人协作页面开发还是应该遵循一些css规范，比如：

1. 首先不能影响别人

1. 对于模块开发者，他不需要关心除了全局样式框架之外的任何class冲突问题，模块的样式都是在顶部模块class基础上派生，这也保证了不会影响其他模块

2. 对于样式框架开发者（或者各页面的base.css），你可以定义样式模型，但你必须考虑到模型内部可能会嵌套他人的模块，因此模型以及模型内部元素class必须带上完整的层次结构，例如：

.module-a {}
.module-a-head {}
.module-a-body {}
.module-a-body-xx {}

如某网站头部的html结构

这样既保证了不会影响内部模块，也不会被内部模块的派生式样式所影响。虽然这样带来了一定的html代码量增加，不过却是值得的，因为你没办法保证模型内部不会出现class为head的元素，所以你不能像模块开发者一样使用：

.module-a {.head {}
}

如果需要继承某个样式模型，可以使用覆盖式class扩展的方式，例如：

<div class="module-a module-a-can_fly"></div>
…
.module-a-can_fly { /* 我是覆盖样式，只有帅气的人才看得到 */ }

这保留了元素的类型信息，便于脚本操作。

2. 不能被别人影响

1. 模块开发者需要 reset 可继承样式，例如 text-align, line-height, color 等，不然当区块被引入到另外的页面时，结果可能不是你想要的。

2. 如果页面未遵循第一条第二点，那么你应该那么做。

说的不对的地方请大大们指出：）

转载于:https://my.oschina.net/cbRenfloql/blog/425531

如何避免模块间的CSS冲突相关推荐

angular 居中_Angular 的模块间通信
作者 | Sergio Cruz 译者 | 足下模块是Angular的构建单元,Angular应用程序的所有可视化元素也是由模块构建的.当我们把模块拆散成更小的模块时,我们就要确保它们可以把数据传来 ...
科学释梦——意识窗口在记忆模块间的穿越
作者:谢平中国科学院大学教授唐代诗人李白曾说,"浮生若梦,为欢几何",将人生喻为短暂的梦幻.有些人生如梦,有些梦若人生,还有梦想人生......梦--五彩缤纷,诡异神奇,我们 ...
初探linux内核编程，参数传递以及模块间函数调用
一.前言我们一起从3个小例子来体验一下linux内核编程.如下: 1. 内核编程之hello world 2. 模块参数传递 3. 模块间函数调用二.准备工作首先,在你的linux系统上面安装l ...
【Android 逆向】Android 逆向通用工具开发 ( Android 逆向通用工具组成部分 | 各模块间的关联 )
文章目录一.Android 逆向通用工具组成部分二.Android 逆向通用工具各模块间的关联一.Android 逆向通用工具组成部分 Android 逆向通用工具肯定是跨平台的 , 涉及到 ...
组件和模块间Activity路由框架
AFRouter 组件和模块间Activity路由框架,通过动态代理技术实现,轻量.灵活特性支持绝大多数参数类型(Intent可携带的数据类型) 专为组件和模块间Activity路由设计,组件化U ...
ios业务模块间互相跳转的解耦方案
*此文章需有一点runtime的知识,假设你不了解runtime,<高速理解Runtime of Objective-C>: http://mp.weixin.qq.com/s?__biz ...
模块间holder的Boost.Flyweight测试
模块间holder的Boost.Flyweight测试实现功能 C++实现代码实现功能模块间holder的Boost.Flyweight测试 C++实现代码 #ifndef BOOST_FLYW ...
模块间接口设计的原则
模块接口是模块之间进行对接交互的门户,我们在设计时至少应该遵循以下四个原则: 一,简单原则.所谓简单,主要体现在模块接口的使用方法上,模块的使用者在不借助或借助很少的文档的情况下,就 ...
读保护_混合ASIL系统中不同安全等级模块间的边界保护
01 功能安全组件的软件开发针对ISO 26262对功能安全软件研发的要求,AUTOSAR将功能安全需求进行了具体拆分.当前的AUTOSAR规范囊括了诸多功能安全组件软件开发的需求概念. 在AUTO ...

如何避免模块间的CSS冲突

如何避免模块间的CSS冲突相关推荐

最新文章

热门文章