下面是二系列内容中的第一部分，第一部分我们关注对于管理样式的观点，并在其基础上总结出可行的方案。第二部分我们将对以上结论进行对比。强大的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样式进行划分我之所以将这两条放在一起是因为它们都需要权衡利弊的。如果我们想让样式比较容易管理的话，我们则有必要增加代码并会增加浏览器的请求负担，比如使用额外的样式、空白和断行。 难处理吗？有些人认为这些并不重要的。额外的样式表意味着增加服务器请求，但对于multi-threading浏览器来说并不是问题。同时css软件像TopStyle很容易将你的文件压缩成单行的，因此在工作的时候用多行的版本，当上传到服务器的时候用单行的版本并不是一件困难的事情；甚至你会有一些小的脚本工具来帮你（将你的代码优化为单行就可以上传了）。 看一下现实情况记住，这里我们讨论的是怎么让大型网站文件更易管理。为复杂的结构页面定义样式（多主题，多层的导航），多样式表意味着你可能需要使用4-5个文件：颜色，导航，结构，表单，表格 等等。除了上面提到的之外，当我们打开 espn 主页的时候会有短暂的断开, 你可能会去想到这是因为额外的请求引起的。每一个网站都会每天都会有基本的更新（大概每周都会有样式表的更细，有的时候甚至每天更新），同时你也会发现为了将文件变小上传到服务器上是件痛苦的事情。 给予我们的启示？回想一下我们讨论过的内容，大型网站方便管理的css样式应为：1、总体上来说，编写css时需要重复利用2、良好的css注释说明3、对于兼容样式，需要一个单独的兼容样式文件4、一个以上css文件或几个css文件更易维护管理5、css本地是多行、断行的，但是上传到服务器上的css应该是优化为一行的。通过以上列表不难看出，组织良好的样式文件将会增加css文件与代码，同时增加服务器请求负担。然而，我们都知道一旦css样式第一次解析下载后它就会缓存在本地，这样以后就减轻了对代码的反复请求了。 合理使用沉余代码在合理使用沉余代码方面我们应该怎么做那？它可直接影响着我们对样式管理维护的方式。好了，让我们看一下“实用的css管理与优化”文章里面介绍的几种管理优化css的讲解。 讨论请用下面的留言区对本文提到的问题列表进行讨论，在留言之前请略读一下“实用的css管理与优化”，你的评论可能比上文说的更恰当。 中文原文：关于css管理优化的探讨英文原文：Discussing CSS Management and Optimization

　　推荐阅读

　　div 内table 居中实现代码

css代码：　　 复制代码代码如下: 　 #dlgReply { /*display: table-cell; text-align: center;*/ vertical-align: middle; } table { margin-left: auto; margin-right: auto; } html代码： 复制代码代码如下: >>>详细阅读

本文标题：编写易于管理的css的技巧

地址：http://www.17bianji.com/kaifa2/CSS/16611.html

 1/2    1