优化代码 改善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...)是一个好规则。

 Example Source Code
/* ------------------------------- */
/* 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):

 

本文作者:



相关阅读:
(八)—接口
基于jQuery的左右滚动实现代码
用vbs实现的确定共享文件夹的本地路径?
CSS外部引用使用link与import的区别
Windows7下PHP开发环境安装配置图文方法
控件开发时两种JS嵌入资源方式的使用方法
用JSP从数据库中读取图片并显示在网页上
用ASP.Net写一个发送ICQ信息的程序
JS模仿MSN右下角弹出提示框代码
VBS教程:正则表达式简介 -定位符
Linux下清空用户登录记录和命令历史的方法分享
php smarty模版引擎中变量操作符及使用方法
php 数组的合并、拆分、区别取值函数集
新手学堂:Linux操作系统Shell基础知识
快速导航

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