编写易于管理的css的技巧

时间:2012-06-29 14:10:01  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:几年已经被广泛推广了。感谢Wired redesign(以及后来的high profile redesigns…,更多组织)和CSS Zen Garden(禅意花园)。除此之外,有越来越多的设计师加强了对于css的学习,并通过学习让工作更容易、简单,或者他们本身就是? 它容易吗?一旦有人了解并使用了css技术,没有多少人认为对网站布局和定义用css会比用table表格有难度。然而,对于管理大型动态、复杂...
  正文:简介:越来越多的大型网站开始关注、使用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、为了易于管理维护,你是否将你的样式文件分为多个文件?(看digital-web, bleach)
我们一起看一下每一个结论,并对其进行总结后制定一个可行的方案。

继承与重复利用
Davd在他的“继承与重复利用”文章里面做了详细的分析。其实继承与重复利用是同一个范畴。在哪里设置样式需要根据实际项目情况来定。然而在本文所讲的范围内,在管理大而复杂的样式时重复利用是经常使用到的。

管理兼容样式
这一观点是比较重要的。当用css搭建网站时,使用兼容样式是不可避免的。Integrated Web Design: Strategies for Long-Term CSS Hack Management 是一篇很有用的文章,我认为文章里给我们的三条建议是比较重要的。
1、对css和兼容样式了如指掌
2、注释、注释、注释
3、采用正确修复方法
使用以上三条建议,第一条让我们尽量的少用兼容样式(了解你的兼容css样式意味着你应该清楚何时使用到它们)它们很容易解释并容易修复的。从而使你定义的css样式比较容易管理。

多行优化为一行,并根据功能的需要对css样式进行划分
我之所以将这两条放在一起是因为它们都需要权衡利弊的。如果我们想让样式比较容易管理的话,我们则有必要增加代码并会增加浏览器的请求负担,比如使用额外的样式、空白和断行。
编写易于管理的css的技巧》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/css/22213.html


关于《编写易于管理的css的技巧》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td