日期:2013-12-20 浏览次数:21467 次
越来越多的大型网站开始关注、使用css,对于管理多个复杂css文件显然是有异议的。下面是二系列内容中的第一部分,第一部分我们关注对于管理款式的观点,并在其基础上总结出可行的方案。第二部分我们将对以上结论进行对比。
强大的css技术最近几年曾经被广泛推广了。感激Wired redesign(以及后来的high profile redesigns…,更多组织)和CSS Zen Garden(禅意花园)。
除此之外,有越来越多的设计师加强了对于css的学习,并通过学习让任务更容易、简单,或者他们本身就是?
它容易吗?
一旦有人了解并使用了css技术,没有多少人认为对网站规划和定义用css会比用table表格有难度。然而,对于管理大型动态、复杂的网站款式明显是一个艰巨的任务。
禁止紧缩
再进一步讲之前,我必须澄清一个观点。以前当我写gzipping CSS的文章时,大家通过邮件或博客对“如果你的css文件过大,你不知道你应该怎样办时不要疯狂的紧缩它们”发表了各自的看法。那么,我们看下面列表的同时研讨一下如何让css文件更小。
名称 | CSS 文件大小(kb) | 注释 |
---|---|---|
www.mezzoblue.com | 20KB | 325 行css款式代码 |
www.stopdesign.com | 42.75KB | 1200 行css款式代码 |
www.wired.com | 27.28KB | 1014 行css款式代码 |
espn.go.com | 20.81KB | 799 行css款式代码 |
www.blogger.com | 26.52KB | 1200行css款式代码 |
www.travelocity.com | 31.79KB | 400 行css款式代码 |
以上是使用css规划、定义网站的css文件大小的详细数据,它是定义整个网站的css文件大小。每一个css标签款式代码单独写一行。
以上网站的css文件都大于20Kb,如果你写的css款式代码达到1000行的话,能否应该删除代码里的断行、空格,或者你应该处理一下那些大而复杂的款式。css文件的大小是个问题,对于当前的维护也是个问题。
但是,当网站上线后,你多久真正管理、维护css那?
对于一些上线后的网站来说,它们的css基本保持不变的。
我知道在网站出现问题之前我不会对网站的css文件进行更新、维护的。我置信Doug网站在他们重新设计改版之前他们也不会对css改动太大。像www.travelocity.com网站又会是怎样那?或是为了特殊的宣传,你不得不给网站更新一段时间的内容?
理想上一些网站的css并不是原封不动的。对于大型网站(或者简单的网站但是结构复杂的)它们是代码简约、备有注释、组织有序的css文件。
结论:编写易于管理的css
通过对以上站点css文件审查,有一件事情变的越来越明了了。有几条结论需求我们在一开始编写css的时候就应该留意,我们应该如何编写易于管理、维护的css款式。
1、承继款式、反复利用?
2、你将如何管理hacks兼容款式?
3、你能否应将线上css文件优化在一行,而在编写的时候可以多行?
4、为了易于管理维护,你能否将你的款式文件分为多个文件?(看digi