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...）是一个好规则。


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）


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文件的末尾，你可以用我上面提出的规则定义所有其他的自定义类


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

评论 (0) All

登陆 还没注册？