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

当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成。所以,结构优良的代码能很大程度上优化它的可维护性。下面列出五种提高CSS文件可维护性的方法,也就是一种较好的CSS样式指南。

1.分解你的样式

对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释。例如,可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。

而对于较大的工程,这样显然不会有什么效果。此时,就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子,它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构,而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种,master stylesheet 使用了最常见的一种。

/*------------------------------------------------------------------

[Master Stylesheet]
Project: Smashing Magazine
Version: 1.1
Last 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 / #footer
Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/

时间: 2024-11-03 18:04:55

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

提高CSS文件可维护性的五种方法总结_经验交流

1.分解你的样式  对于小项目,在写代码之前,按页面结构或页面内容将代码分为几块并给予注释.例如,可以分别将 全局样式.布局.字体样式.表单.评论和其他分为几个不同的块来继续工作.  而对于较大的工程,这样显然不会有什么效果.此时,就需要将样式分解到几个不同的样式表文件.下面的master stylesheet 就是这一方法的例子,它的工作主要是导入其他样式文件.使用这一方法不仅能优化样式结构,而且有利于减少一些不必要的服务器请求.而分解文件的方法就有许多种,master stylesheet 

Linux 中清空或删除大文件内容的五种方法_Linux

在 Linux 终端下处理文件时,有时我们想直接清空文件的内容但又不必使用任何Linux命令行编辑器 去打开这些文件.那怎样才能达到这个目的呢?在这篇文章中,我们将介绍几种借助一些实用的命令来清空文件内容的方法. 注意: 由于再Linux中一切皆文件,你需要时刻注意,确保你将要清空的文件不是重要的用户文件或者系统文件.清空重要的系统文件或者配置文件可能会引发严重的应用失败或者系统错误. 提示:在下面的示例中,我们将使用名为 access.log 的文件来作为示例样本. 1. 通过重定向到 Nul

谈谈CSS加入网页的五种方法

在XHTML网页中如何加入CSS呢?这篇教程告诉大家引入CSS的几种方式. 在XHTML网页中如何加入CSS呢?这篇教程告诉大家引入CSS的几种方式. XHTML文件是通过CSS样式进行显示的控制的,也就是结合XHTML与CSS来表现页面内容.那么到底有哪些方式在XHTML文件中引入CSS样式呢? 一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <td sty

网页中使用CSS样式表的五种方法

css|网页|样式表 一.使用STYLE属性 将STYLE属性直接加在个别的元件标签里,<元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%>这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』. 二.使用STYLE标签

提高SQL Server性能的五种方法

有时,为了让应用程序运行得更快,所做的全部工作就是在这里或那里做一些很小调整.但关键在于确定如何进行调整!迟早您会遇到这种情况:应用程序中的SQL查询不能按照您想要的方式进行响应.它要么不返回数据,要么耗费的时间长得出奇.如果它降低了企业应用程序的速度,用户必须等待很长时间.用户希望应用程序响应迅速,他们的报告能够在瞬间之内返回分析数据.就我自己而言,如果在Web上冲浪时某个页面要耗费十多秒才能加载,我也会很不耐烦. 为了解决这些问题,重要的是找到问题的根源.那么,从哪里开始呢?根本原因通常在于

最大限度提高数据中心效率的五种方法

如今,优化数据中心的电源使用是数据中心管理人员的高度优先的工作事项,而随着电力成本在数据中心成本比例持续增长,他们仍然面临着严峻的挑战. 大约10%的数据中心运营支出(OPEX)是电力成本,在未来五年内,电力成本可能约占数据中心运营支出的15%. 能源使用效率(PUE)已经成为用于测量数据中心电能效率的实际行业标准.然而,虽然PUE指标侧重于数据中心设施组件的能效,但它并未提供IT设备级能效改进的见解. 在大多数情况下,提高IT设备的电源使用效率可以最大限度地提高整体的电源使用效率.数据中心经理

PHP读取文件内容的五种方式_php实例

php读取文件内容的五种方式 分享下php读取文件内容的五种方法:好吧,写完后发现文件全部没有关闭.实际应用当中,请注意关闭 fclose($fp); -- php读取文件内容: -----第一种方法-----fread()-------- <?php $file_path = "test.txt"; if(file_exists($file_path)){ $fp = fopen($file_path,"r"); $str = fread($fp,files

简单判断网站百度权重的五种方法

坊间都在谣传谷歌将会停止对网站pr的更新了,其实就算是谷歌停止对网站pr的更新,对于我们这些站长来说影响并不大,因为我们更关心百度对网站权重的判断,我们知道谷歌有具体的判断网站权重的数据,但是百度没有这方面是没有确切的数字的,而且pr的数值和百度是没有任何关系的,那么如何判断一个网站的百度权重呢?很多人都不得其法,下面笔者结合自己多年的研究,来跟大家介绍一下判断网站百度权重的五种方法! 一:根据百度快照周期 大家都知道百度快照的检查方法,通过命令Site就可以了,大家如果经常看知名的大网站的百度

浅析五种方法让你的新站快速被搜索引擎收录

我们做为站长,在开始建站的时候,都非常希望我们的网站以最快的速度被搜索引擎收录,我想做过站长的朋友都有过这样的体验,恨不得一天看几次,期待着我们的站被收录.但是如何才能做到让搜索引擎快速收录你的网站呢?下面就为大家介绍五种新站被搜索引擎收录的方法,希望给各位站长们带来帮助,让我们的网站以最快的速度收录. 那么如何才能让新站快速的被搜索引擎收录呢?我们还得要了解各个搜索引擎的特点. A:百度:注重网站的关键词和外链; B:google:注重网站内容和外链; C:yahoo:注重关键词和外链. 综合