查看文章 |
翻译：优化CSS文件改善代码可读性
2008-06-07 0:44
原英文地址：http://woork.blogspot.com/ 一些读者曾问我如何以更好的方式组织CSS文件来改善代码的可读性并简化其的管理。一般情况下，我只采用几个简单的规则，但我认为很有用，在你不得不去管理一个有着复杂设计的页面/站点的CSS文件时，它可以避免让你抓狂。在这里，我将简单探讨如下所示的典型的两列固定宽度布局：  第一步：重定义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;} ... 第二步：重定义页面标签 为了改善代码可读性，我建议缩进标签：如果一个标签只有两三个属性（如#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;}
第三步：定义自定义类 在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;}
...就如我所说，这些只是我的个人建议，并不是本质规律，但我想如果你要部署一个更具可读性的CSS文件，你还是会发现这些规则是很有用的。 |
