优化代码 改善CSS文件可读性
作者:蓝调 来源:蓝调blog 发布时间:2008-06-13 13:50:00
Some readers have asked to me what is the better way to organize a CSS file to optimize code readability and simplify code management. Generally, I adopt just some simple rules and, it's my opinion, they are useful in order not to become crazy if you have to manage a CSS file for a page/site with a complex design. In this post, I discuss for simplicity a typical two columns fixed layout like this:
一些读者曾问我如何以更好的方式组织CSS文件来改善代码的可读性并简化代码的管理。一般情况下,我只采用几个简单的规则,但我认为很有用,因为当你不得不去管理一个有着复杂设计的页面/站点的CSS文件时,它可以避免让你抓狂。在这里,我将简单探讨如下所示的典型的两列固定宽度布局:
Step 1: redefine HTML elements
I think it's a good rule to redefine HTML elements (body, a, form, input...) in the first rows of your CSS files.
第一步:重定义HTML标签
我认为在CSS文件前面几行重新定义HTML标签(body, a, form, input...)是一个好规则。
/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...
Step 2: define page elements
In order to improve code readability, I suggest to indent all elements but with some sagacities: if an element have just two-three attributes (for example #navbar), you can use a single line to declare all properties, otherwise it's better to declare every single property in a new line (for example see #navbar li a:link, #navbar li a:visited):
第二步:重定义页面标签
为了改善代码可读性,我建议缩进所有标签是比较有远见的:如果一个标签只有两三个属性(如#navbar),你可以在一行内声明所有属性,否则在一行内最好只声明一个属性(如下所示的#navbar li a:link, #navbar li a:visited)
/* PAGE Elements
/* ------------------------------- */
#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link,
#navbar li a:visited {
background:#444444;
text-decoration:none;
height:24px;
line-height:24px;
display:inline;
float:left;
width:auto;
padding:0px 10px;}
#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}
div.spacer{clear:both; height:10px; display:block;}
#footer{width:auto; display:block; height:24px;}
#footer a{color:#666666; text-decoration:underline;}
Step 3: define custom class
In the final section of your CSS files, you can define all other custom classes with the same rules I specified above:
第三步:定义自定义类
在CSS文件的末尾,你可以用我上面提出的规则定义所有其他的自定义类
/* ------------------------------- */
/* OTHER Class
/* ------------------------------- */
.small{font-size:11px;}
.underline{text-decoration:underline;}
div.small-section{background:#CCCCCC;}
div.small-section a{color:#333333; font-weight:bold;}
...
How I said, these are only my personal suggestions and not true rules, but I think you can find them useful in order to deploy a more readable CSS file.
就如我所说,这些只是我的个人建议,并不是本质规律,但我想如果你要部署一个更具可读性的CSS文件,你还是会发现这些规则是很有用的。
猜你喜欢
- 在这系列视觉设计的文章间隙插一篇字体单位的文章。前文说了,字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按c
- 1、我的第一个个人主页一打开就是一张很眩的图片,图片上有个“进入”,点击后才算真正看到我的主页。现在回想起来那个时候这样做,大概是很想迅速展
- XPath(XML Path language)是一种处理XML文档段的语言。XSLT(Extensible Stylesheet Lang
- 1、从外部文档中粘贴时,如果不想要其格式,只要文字,可以使用“Edit->paste as text”命令,而不要直接Ctrl+V。2
- 仿豆瓣分页原型(Javascript版)写了个分页的样式。自我感觉,这样的分页前后兼顾,对于用户的体验是蛮好使的Javascript分页代码
- Oracle Tips, Tricks & Scripts1. Topic: Compiling Invalid Objects:O
- 对于 link 元素 和 style 元素 我相信大家都比较了解,但对于他们的出现位置可能有误解。在 淘宝 的所有频道中出现这样一个问题:频
- 【代码示例】 [code=SQL] DELIMITER $$ DROP FU
- 刚才运行了一段代码,来查看Request.ServerVariables里面有多少值,看了一下,共50个!代码<%=Request.S
- 说明和代码如下:<%@ language = vbscript%><% 
- 昨天在做mergeCSS的时候遇到两个正则匹配的问题,也花了不少的时间,最后在CSS森林群的 CE 同学帮助下,才完成了这俩正则,特别记录下
- 当然,如果你的网站文章中有图片,那么请记得一定要打上自己的LOGO,而且这个LOGO不要固定在这些图片的某个角落里,一定要随机出现在图片的任
- 方法一【推荐】、用js插入flash,可防止虚线框激活建立一个ShowFlash.js文件,拷贝以下代码:function sho
- 前言大家好!这个系列文章是W3CN 阿捷编写的。是一些制作过程中的心得和经验,希望对大家有点帮助。第一天开始制作符合标准的站点,第一件事情就
- 有。试试下面这个程序:saveip.asp<%Server.Scripttimeout = 1000On 
- asp之家注:防止表单重复提交的方法,在客户端其实很容易实现,只要使用js让用户第一次点击提交按钮后,把提交按钮设置为disabled,这样
- 很多时候,我们都需要获取windows消息提示框的文本内容,例如系统异常信息,软件错误提示等。。。但是如何获取提示信息呢?通常我们的印象中,
- 安装 SQL2000 时,系统经常会提示:操作被挂起,要求重新启动计算机,如图1: 图1重新启动后,再次安装时问题仍然存在。解决办
- 之前写过的组织结构和组织体系都太抽象了,读到标签系统我才有那种“略懂”的感觉。哈哈…书上提到的标签包括:导航情境式链接:常见的“更多”这种用
- 你有没有觉得你的CSS样式表文件过于臃肿?其实如果你注意并培养一些比较好的CSS书写习惯,我想你的CSS样式表过于”肥胖”的问题会得到很好的