《在外闯荡也不可迷失自我!——浅谈第三方组件的cssreset网页设计.docx》由会员分享，可在线阅读，更多相关《在外闯荡也不可迷失自我!——浅谈第三方组件的cssreset网页设计.docx（13页珍藏版）》请在三一文库上搜索。
1、在外闯荡也不可迷失自我！浅谈第三方组件的cssreset网页设计-电脑资料所谓第三方组件（widget），就是指我们提供给第三方网站使用的小模块，如微博的关注按钮，分享按钮，社交化组件，微博秀等等，通常我们会面临如下一些问题。一、被同样的命名覆盖我们先来看看某些网站的公用文件的写法：eg1某网站：clearfix这个命名，恐怕对于大多数的前端工程师都是再熟悉不过的了，这个词基本已经成为清除浮动某种方法的代名词了。当然，这种清除浮动的方法可以用其他命名，这个class也可以用来定其他属性。如果我们的组件恰好的也用了clearfix的命名，那么一定要想办法避免被同样命名的覆盖。在微博的组件中，我们
2、会在所有组件中的class命名上加上我们自己特有的前缀WB_widget，其余命名：WB_widget_xxxx;虽然看起来这样没有什么节省代码命名上的优势，但是确实可以避免一些简单的class命名重复。当然，如果您偏要修改我们组件的样式，偏偏要定义成和我们这样具有特殊命名的class同名的话，那我们也是拦不住的。二、继承了多余的属性再来看看下面几个网站的样式：eg2某网站：eg3某网站:eg4某网站：eg5某网站:看着上面几个网站的通用写法，这就意味着，如果我们只是简单的定义，那么，我们的文本段落会有边距，我们的链接会有背景色，我们的图片都是块元素单独成一行，我们的文本区域都有着与第三方网站
3、统一的边框，而不是我们定义的颜色碰到这么多无法称之为样式显示bug的问题，一切都由于我们的组件规范的严谨性。那么如何保证网站对我们用的标签没有特殊定义？这个问题真正思考起来恐怕会得到一个很纠结的答案：除了考虑到我们经常用到的那些css属性之外，我们还要考虑到我们现在爱不释手的css3属性，既然考虑到了css3属性，不可避免的要考虑到各个高级浏览器的兼容问题。纠结之后，恐怕最后得出的结论使我们非常不喜欢的reset周全考虑：1234500oClco寸IO9006OClCN00Cl3132333435363738394041424344454647484950515253#555657585960
4、61626364pbackground:transparent;border:0;bottom:auto;clear:none;clip:auto;color:#333;cursor:auto;direction:ltr;filter:;float:none;font:normalnormalnormal12px/16pxHelveticaNeue,Arial,sans-serif;height:auto;left:auto;letter-spacing:normal;list-style.:none;margin:0;marks:none;max-height:auto;max-width:
5、auto;min-height:0;min-width:0;overflow:visible;padding:0;page:auto;position:static;quotes:none;right:auto;-o-set-link-source:none;size:auto;text-align:left;text-decoration:none;text-indent:0;text-overflow:clip;text-shadow:none;text-transform.:none;top:auto;vertical-align:baseline;visibility:visible;
6、white-space:normal;width:auto;word-spacing:normal;word-wrap:normal;z-index:auto;-webkit-box-shadow:none;-moz-box-shadow:none;-ms-box-shadow:none;-o-box-shadow:none;box-shadow:none;-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0;-webkit-opacity:1;-m
7、oz-opacity:1;-ms-opacity:1;-o-opacity:1;opacity:1;-webkit-outline:0;-moz-outline:0;-ms-outline:0;-o-outline:0;outline:0;-webkit-text-size-adjust:none这么大篇幅的reset，估计也只能说是尽量把常用的考虑进去了；具体还要看使用组件的第三方，网站的样式到底会出现什么样的特殊性，三、css权重问题eg6某网站：我们来回忆一下css写法的权重级别important,内联2类标签|伪类|属性选择伪对象继承,通配符如果我们的组件是以模块的形式嵌入第三方的网站
8、时，我们通常都以class定义；思考如何提高我们reset样式的权重，这又是一个很纠结的问题。可能你会说，带着标签定义样式。亲，这个方法确实可行；但是，如果一个网站用id定义了一个公用样式，按着这种权重，恐怕要达到id的同级权重，只能是望尘莫及。可能你会说，那直接用id好了。确实，id的权重数字是很漂亮的，可是id与class的特殊性就在于，id在一个页面中只能出现一次。所以，如果这个组件，在此页面确实只能出现一次，那是再好不过的了。既然是组件，以其小巧灵活为优势，一个页面只出现一次，怎么能够满足我们的需求呢？所以，id的写法也会被否掉。现在只剩下最让热痛苦的写法了：！important。这个
9、写法确实能保证样式的级别高权重，为了去重写相关样式，覆盖reset中的定义，我们只能不断的用级别最高的定义去覆盖。但是，满篇飘红的样式对于有洁癖的前端工程师来说简直是一种折磨。那么，保证css独立的最好办法到底是什么？其实这个办法我们都在用iframe嵌套。但是此方法，对于需要传递数据的组件不适用。总而言之，第三方组件想保持独立性一直都是我们在纠结的问题。从第三方的网站出发如此纠结，那我们莫不如从我们的组件出发。我们可以将组件分为几个很简单的级别：简单的需要很简单的几个标签及样式就可以完成；这样的组件，我们完全可以只写部分reset的css，定义很少的属性，甚至不定义都不会有大的妨碍。以节省大量的成本。复杂逻辑型很多小模块组成的组件；就需要多在第三方网站上多下功夫了，努力完善自己组件的公用样式。说了这么多，组件的样式reset仍然是个偶尔会让我们纠结的事。如果您是第三方网站的站长或者工程师，请记住：不管我们如何管教好我们的样式，重要的是，请您要把我们当做HTM或者XHTM标准下的代码执行，也就是说，切记，要在网站的第一行加上dtd的类型：如或者其他的类型。