CSS教程:编写易于管理的css

越来越多的大型网站开始关注、使用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样式进行划分
我之所以将这两条放在一起是因为它们都需要权衡利弊的。如果我们想让样式比较容易管理的话,我们则有必要增加代码并会增加浏览器的请求负担,比如使用额外的样式、空白和断行。

难处理吗?
有些人认为这些并不重要的。额外的样式表意味着增加服务器请求,但对于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

时间: 2024-08-17 19:35:15

CSS教程:编写易于管理的css的相关文章

强烈推荐:非常不错的样式表CSS教程

css|教程|样式表 强烈推荐:非常不错的样式表CSS教程(目录如下) 强烈推荐:非常不错的样式表CSS教程(1) 强烈推荐:非常不错的样式表CSS教程(2) 强烈推荐:非常不错的样式表CSS教程(3) 强烈推荐:非常不错的样式表CSS教程(4) 强烈推荐教程:css教程–十步学会用css建站(全) 教程连接地址:http://jorux.com/archives/10steps-built-web-with-css

CSS学习教程:认识会用CSS样式表的文本属性

css|教程|样式表 文本(text):css控制的文本属性主要包括以下四个: text-indent, text-align, text-decoration, text-transform; 1. text-align:属性text-align指文本的对齐方式,其有向左,向右,居中对齐以及自动适应四种对齐方式: text-align: left;text-align: right;text-align: center;text-align: justify; 例:css代码: body {f

CSS开发框架技术OOCSS编写和管理CSS的方法

文章简介:今天最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似的技术存在,如BEM.这些方法试图对CSS采用面向对象的编程原则.尽管样式语言和面向对象的软件设计原则在概念之间存在一定的问题,这些微妙的东西对于一个欠缺经验的开发人员来说可能不会立即显现出来.最令人不 公认的拥有一个编写和管理CSS的方法比什么都要更好.尽管如此,一些开发人员的实践是不利于语义化质量和长期的可维护性.我们要讨论一些被提倡的"CSS框架方法"的问题和作为Web开发人员,我们如何可以更好的解决这些问题

使用LESS简化层叠样式表(CSS)的编写

CSS(层叠样式表)是一门历史悠久的标记性语言,同 HTML 一道,被广泛应用于万维网(World Wide Web)中.HTML 主要负责文档结构的定义,CSS 负责文档表现形式或样式的定义. 作为一门标记性语言,CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端http://www.aliyun.com/zixun/aggregation/7433.html">开发工程师来讲,往往会因为

学习CSS教程:学习CSS网页布局

文章简介:你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则,在工作的时候,你依然陷入迷惘的泥潭中苦苦挣扎. 这个篇文章介绍的是现在广泛使用于网站布局领域的CSS基础. 你也许知道什么叫选择器,什么叫属性,什么叫数值,也许你对css布局略懂一二,但这还远远不够.如果你想着从头开始学习HTML和CSS的话,我建议你认真查看下 this tutorial. 否则

CSS3教程收集分享:具有动画过渡效果的CSS教程

文章简介:CSS3教程收集分享:具有动画过渡效果的CSS教程. 今天我们分享出了18个优秀的具有动画过渡效果的CSS3详细教程.CSS3让一切变得更加容易和高效,它改变了很多旧的WEB开发技术,在目前网络高速发展的当下,更好的为网页设计师来做后期的维护提供的便利.随着这一过渡效果的使用,让更多的设计变得高效起来.让网页也变得更具艺术过渡的 气质.下面这18个例子可以让你得到更多的灵感.也会让你的交互创意灵感变得更加有意思起来. 创建一个下拉菜单,使用CSS3转换 (演示 下载) 动画Popove

网站设计的标准时代的XHTML+CSS教程

css|xhtml|标准|教程|设计 让我们赶紧跟上新时代的步伐,一起来了解一下网站标准吧. 一.为什么要建立网站标准 我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站.例如1996-1999年典型的"浏览器大战",为了兼容Netscape和IE,网站不得不为这两种浏览器写不同的代码.同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的WAP技术.类似的问题举

经典实用CSS教程详细讲解

css|教程 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具

CSS教程—元素的定位

css|教程 1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位example: 以下是引用片段:>#div-1 {  position:static; }2. position:relative|相对定位使用position:relative,就需要top,bottom,left,right4个属性来配合,确定元素的位置.如果要让div-1层向下移动20px,左移40px:example: 以下是引用片