关于量产型页面的css样式开发心得

标签：返回顶部   style   blog   http   color   使用   

量产型页面？

为了方便讨论，有必要就什么是“量产型页面”达成一致。这里所说的量产型页面是指采用通用模块和组件拼凑出来的页面，典型的如：网站管理员后台的页面，这些页面大多是由.ui-box、ui-form、ui-data、ui-btn等通用的模块和组件组装出来的。

量产型页面一般数量较多，而且还会随着网站功能的扩展而不断增加，所以对于这类页面的开发应该优先考虑的是开发效率和文件的组织管理。本文专门就开发此类页面时关于CSS方面的处理做一下心得分享。

我们知道，给元素应用样式无非就只有两种方式：

• 给标签的style属性添加样式规则；
• 给标签起一个类名，然后在样式表中给这个类添加样式规则；

第一种方式缺点自不必说；第二种方式一直是规范所提倡的最佳实践。但在实际开发量产型页面时，第二种方式就不见得是最佳实践。

为什么？

我们知道，通用模块和组件在开发的时候是不考虑具体的使用环境的，即它们一般不包含布局类的样式，如：float、position、margin等。当我们利用这些模块和组件去组装、拼凑出量产型页面时，少不了要做布局上的处理或视觉效果上的特殊改造。采用第二种方式，给元素起一个类名myBox：

div class=”clearfix”>
        div class=”ui-box myBox”>……div>
div>

.myBox { float: left; margin-top: 10px;}

为什么这不是一种“最佳实践”呢？这种做法有两个弊端：

• 给元素起类名，不仅伤脑筋，还影响开发效率；
• 页面多了，样式表增多增大，不便管理；类名增多出现CSS类爆炸，有类名冲突的隐患；

怎么办？

原子类配合工具类(http://www.cnblogs.com/MyNameIsJim/p/css3-less-library.html)。为了方便讨论，这里有必要再一次就什么是“原子类”达成一致。简单说就是常用的、使用频率老高的css规则的简写，例如：.fl { float: left } .mt10{ margin-top: 10px } .fs14 { font-size: 14px}。

上面的例子就可以改为：

div class=”clearfix”>
        div class=”ui-box fl mt10”>div>
div>

这样既不需要为元素起类名，也不需要编辑样式表。

如果原子类没有想要的样式怎么办？

那就通过标签的style属性添加样式吧

如果该元素样式很多呢，我要挂n个原子类或长长的style属性值？

首先，在量产型页面中需要大量特有样式的元素并不多见，在这种情况下有三种解决方式：

• 给元素起一个类名，将样式写到该页面专属的css文件里面。
• 在html里面创建style标签，给元素起一个类名添加样式；
• 给元素起一个类名，将所有量产型页面的特有样式都写到同一个文件：allPage.css

这里就这三种方式做一下比较：

首先说第一种，这是最不可取的，因为量产型页面一般数量较多，而且还会随着网站功能的扩展而不断增加，如果一个页面一个专属css文件，这会导致两个问题：1、css文件繁多；2、刚也说了，在量产型页面中需要大量特有样式的元素并不多见，这就会导致该页面专属的css文件里面兴许就会出现只有一两个css类的情况，代码少的可怜，却占据了一个样式表。

比较第二种和第三种，第二种会增加html文件的大小，每次请求页面都要下载这段css代码；第三种，相比第二种会多一个http请求，但它可以被缓存，且命中率会很高，但这里还有一个问题，allPage.css里面的代码相对于当前页面来讲必定存在一定程度上的冗余，这就好像我们做一个简单专题页面的时候，兴许只要一个返回顶部的功能，但我们却引入了一整个包罗万象的jQuery。所以，这里还需要根据站点的大小和业务的分类等具体情况考虑是否需要将allPage.css拆分为n个大块文件。

完美的方法我们一直在寻找，各有利弊，综合考虑才选择了这种相对较好的方式。如果你有更好的方式也还请告诉我们。

另外，原子类和工具类不能滥用，它们并不适用于定制型页面，如站点首页，原因我懒得说，也说不清，让大神来解释，你自己体会吧：

http://www.zhihu.com/question/21943416/answer/19824456

链接中的页面中的链接中的页面中的链接都点开来看看吧，加油！

关于量产型页面的css样式开发心得,搜素材,soscw.com

关于量产型页面的css样式开发心得

标签：返回顶部   style   blog   http   color   使用   

原文地址：http://www.cnblogs.com/MyNameIsJim/p/css-pattern.html