在外闯荡也不可迷失自我——浅谈第三方组件的CSS Reset

所谓第三方组件(widget),就是指我们提供给第三方网站使用的小模块,如微博的关注按钮,分享按钮,社交化组件,微博秀等等。当我们的组件放在第三方网站上时,不经意间会继承东道主网站的某些样式。但是,我们的目标是:保证自己组件样式的展现,即便寄人篱下,也不可丢失自己的个性!

通常我们会面临如下一些问题。

一、被同样的命名覆盖

我们先来看看某些网站的公用文件的写法:
eg1某网站:

clearfix这个命名,恐怕对于大多数的前端工程师都是再熟悉不过的了,这个词基本已经成为清除浮动某种方法的代名词了。当然,这种清除浮动的方法可以用其他命名,这个class也可以用来定其他属性。如果我们的组件恰好的也用了clearfix的命名,那么一定要想办法避免被同样命名的覆盖。在微博的组件中,我们会在所有组件中的class命名上加上我们自己特有的前缀WB_widget, 其余命名:WB_widget_xxxx;虽然看起来这样没有什么节省代码命名上的优势,但是确实可以避免一些简单的class命名重复。当然,如果您偏要修改我们组件的样式,偏偏要定义成和我们这样具有特殊命名的class同名的话,那我们也是拦不住的。

二、继承了多余的属性

再来看看下面几个网站的样式:
eg2某网站:

eg3某网站:

eg4某网站:

eg5某网站:

看着上面几个网站的通用写法,这就意味着,如果我们只是简单的定义,那么,我们的文本段落会有边距,我们的链接会有背景色,我们的图片都是块元素单独成一行,我们的文本区域都有着与第三方网站统一的边框,而不是我们定义的颜色……碰到这么多无法称之为样式显示bug的问题,一切都由于我们的组件规范的严谨性。那么如何保证网站对我们用的标签没有特殊定义?这个问题真正思考起来恐怕会得到一个很纠结的答案:除了考虑到我们经常用到的那些css属性之外,我们还要考虑到我们现在爱不释手的css3属性,既然考虑到了css3属性,不可避免的要考虑到各个高级浏览器的兼容问题。

纠结之后,恐怕最后得出的结论使我们非常不喜欢的reset周全考虑:

这么大篇幅的reset,估计也只能说是尽量把常用的考虑进去了;具体还要看使用组件的第三方,网站的样式到底会出现什么样的特殊性。

三、css权重问题

eg6 某网站:

我们来回忆一下css写法的权重级别

important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

如果我们的组件是以模块的形式嵌入第三方的网站时,我们通常都以class定义;
思考如何提高我们reset样式的权重,这又是一个很纠结的问题。可能你会说,带着标签定义样式。亲,这个方法确实可行;但是,如果一个网站用id定义了一个公用样式,按着这种权重,恐怕要达到id的同级权重,只能是望尘莫及。可能你会说,那直接用id好了。确实,id的权重数字是很漂亮的,可是id与class的特殊性就在于,id在一个页面中只能出现一次。所以,如果这个组件,在此页面确实只能出现一次,那是再好不过的了。既然是组件,以其小巧灵活为优势,一个页面只出现一次,怎么能够满足我们的需求呢?所以,id的写法也会被否掉。

现在只剩下最让热痛苦的写法了:!important。这个写法确实能保证样式的级别高权重,为了去重写相关样式,覆盖reset中的定义,我们只能不断的用级别最高的定义去覆盖。但是,满篇飘红的样式对于有洁癖的前端工程师来说简直是一种折磨。

那么,保证css独立的最好办法到底是什么?其实这个办法我们都在用——iframe嵌套。但是此方法,对于需要传递数据的组件不适用。

总而言之,第三方组件想保持独立性一直都是我们在纠结的问题。从第三方的网站出发如此纠结,那我们莫不如从我们的组件出发。
我们可以将组件分为几个很简单的级别:简单的——需要很简单的几个标签及样式就可以完成;这样的组件,我们完全可以只写部分reset的css,定义很少的属性,甚至不定义都不会有大的妨碍。以节省大量的成本。复杂逻辑型——很多小模块组成的组件;就需要多在第三方网站上多下功夫了,努力完善自己组件的公用样式。

说了这么多,组件的样式reset仍然是个偶尔会让我们纠结的事。如果您是第三方网站的站长或者工程师,请记住:不管我们如何管教好我们的样式,重要的是,请您要把我们当做HTML或者XHTML标准下的代码执行,也就是说,切记,要在网站的第一行加上dtd的类型:如<!DOCTYPE HTML>或者其他的类型。

特约撰稿人信息

微博UDC全称微博用户研究与体验设计部(User Research & Experience Design Center) ,致力于SNS用户体验设计,为微博产品提供专业解决方案.



Have Your Say »

Required

Required, never published

无觅相关文章插件,快速提升流量