CSS技巧:改善代码可读性并简化代码管理


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文件,你还是会发现这些规则是很有用的。



相关阅读:
一个初级的linux后门制作方法
jQuery 相关控件的事件操作分解
Windows中几个容易被认为是病毒的文件
Windows 7的默认配置确实不如Vista安全
概述IIS6.0默认设置安全性的改变
IE和Firefox下javascript的兼容写法小结
全面优化ADO
了解CSS的查找匹配原理 让CSS更简洁
ASP对FoxPro自由表(DBF文件)的操作
MSSQL和Mysql自定义函数与存储过程
如何监视Linux系统资源的使用情况
分享一个VBScript表单判断实例
PHP生成Flash动画的实现代码
让你的IIS无懈可击的几个基本技巧
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4