提高CSS文件可维护性的五种方法

参考： Smashing magzine 翻译整理： Demix 当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法，也就是一种较好的CSS样式指南。1.分解你的样式对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。 /*------------------------------------------------------------------[Master Stylesheet]Project: Smashing MagazineVersion: 1.1Last change: 05/02/08 [fixed Float bug, vf]Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)Primary use: Magazine-------------------------------------------------------------------*/@import "reset.css";@import "layout.css";@import "colors.css";@import "typography.css";@import "flash.css";/* @import "debugging.css"; */ 同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断措施，这里不再详述。 2.建立CSS文件索引为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。一种可行的方法是建立树形的索引：结构上的id 和 class 都可以成为该树的一个分支。如下： /*------------------------------------------------------------------[Layout]* body Header / #header Content / #content - Left column / #leftcolumn - Right column / #rightcolumn - Sidebar / #sidebar - RSS / #rss - Search / #search - Boxes / .box - Sideblog / #sideblog Footer / #footerNavigation #navbarAdvertisements .adsContent header h2——————————————————————-*/ 或者也可以这样： /*------------------------------------------------------------------[Table of contents]1. Body 2. Header / #header 2.1. Navigation / #navbar 3. Content / #content 3.1. Left column / #leftcolumn 3.2. Right column / #rightcolumn 3.3. Sidebar / #sidebar 3.3.1. RSS / #rss 3.3.2. Search / #search 3.3.3. Boxes / .box 3.3.4. Sideblog / #sideblog 3.3.5. Advertisements / .ads 4. Footer / #footer -------------------------------------------------------------------*/ 另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索 8.RSS。 /*------------------------------------------------------------------ [Table of contents]1. Body2. Header / #header3. Navigation / #navbar4. Content / #content5. Left column / #leftcolumn6. Right column / #rightcolumn7. Sidebar / #sidebar8. RSS / #rss9. Search / #search10. Boxes / .box11. Sideblog / #sideblog12. Advertisements / .ads13. Footer / #footer -------------------------------------------------------------------*/  /*------------------------------------------------------------------[8. RSS / #rss]*/#rss { ... }#rss img { ... } 定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。上一页12 下一页

　　推荐阅读

　　CSS盒模型制定网页的宽度和高度的原理

当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100>>>详细阅读

本文标题：提高CSS文件可维护性的五种方法

地址：http://www.17bianji.com/kaifa2/CSS/17437.html

1/2 1