提高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 
——————————————————————-*/
或者也可以这样:

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

[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. Body 
2. Header / #header 
3. Navigation / #navbar 
4. Content / #content 
5. Left column / #leftcolumn 
6. Right column / #rightcolumn 
7. Sidebar / #sidebar 
8. RSS / #rss 
9. Search / #search 
10. Boxes / .box 
11. Sideblog / #sideblog 
12. Advertisements / .ads 
13. Footer / #footer

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

/*------------------------------------------------------------------ 
[8. RSS / #rss] 
*/ 
#rss { ... } 
#rss img { ... }

定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候,你也可以将检索打印出来从而在你阅读代码的时候方便查阅。

3.定义你的颜色和版式

CSS 中我们无法使用常量,但是在编写颜色和版式方面的代码是我们会经常遇到可以使用很多次的类,在这里可以将之视为CSS的常量。

一种可以减小CSS无常量定义确定的方法是在CSS文件顶部的注释中下一些定义,也就是定义常量。一种最简单的应用就是创建一个颜色表。这样你就可以快速的了解整个页面的色彩,从而避免一些反复修改过程中的错误。如果你需要对颜色进行修改,你也可以很快找到它。

/*------------------------------------------------------------------ 
# [Color codes]

# Dark grey (text): #333333 
# Dark Blue (headings, links) #000066 
# Mid Blue (header) #333399 
# Light blue (top navigation) #CCCCFF 
# Mid grey: #666666 
# */

或者,你也可以选择描述你布局当中使用的颜色。对于一个给定的颜色,你可以将用到该颜色的块罗列出来。当然,你也可以选择按页面元素来罗列颜色。

/*------------------------------------------------------------------ 
[Color codes] 
Background: #ffffff (white) 
Content: #1e1e1e (light black) 
Header h1: #9caa3b (green) 
Header h2: #ee4117 (red) 
Footer: #b5cede (dark black)

a (standard): #0040b6 (dark blue) 
a (visited): #5999de (light blue) 
a (active): #cc0000 (pink) 
-------------------------------------------------------------------*/

对于版式有同样的例子。

/*------------------------------------------------------------------ 
[Typography]

Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif; 
Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif; 
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif; 
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;

Notes: decreasing heading by 0.4em with every subsequent heading level 
-------------------------------------------------------------------*/

4.格式化CSS属性

当我们编写代码的时候,使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面,另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的,也可以将页面元素按照它在布局中的结构进行排序:

body, 
h1, h2, h3, 
p, ul, li, 
form { 
border: 0; 
margin: 0; 
padding: 0; 
}

一些开发者用一种更为有意思的方法:他们将属性按首字母的顺序排列。值得注意的是,这样一种方法可能对某些浏览器会产生问题。

不管自己的格式如何,你要确保你已经清晰的定义了这些格式方法。这样,你的同事在阅读你的代码的时候将会感谢你的努力。

5.缩进会是你的朋友!

为了让你的代码给人感觉更为直观,你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候,这种方式将带来混乱。但是,适度的使用这种方式,你可以很清楚的区分相同类的不同点。

#main-column { display: inline; float: left; width: 30em; } 
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; } 
#main-column p { color: #333; }

同时,样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了,结果后来又发现修改的样式导致了页面出错,不得不苦苦寻找。因此,为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是,给修改过的样式缩进,同时,也可以使用一些注释(比如"@new")来做一个标识。

#sidebar ul li a { 
display: block; 
background-color: #ccc; 
border-bottom: 1px solid #999; /* @new */ 
margin: 3px 0 3px 0; 
padding: 3px; /* @new */ 
}

总的来说,只有建立一个合适的样式指南才会对样式表的可读性有所帮助。记住,移去每一个对你理解文件没有帮助的样式指南,避免对过多的元素使用过多的样式指南。然后,为了一个可读性可维护性良好的CSS文件而努力吧。

(0)

相关推荐

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

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

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

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

  • Linux文件清空的五种方法总结分享

    本文主要介绍的是Linux文件清空的五种方法,下面话不多说,来看看详细的介绍吧. 1.使用重定向的方法 [root@centos7 ~]# du -h test.txt 4.0K test.txt [root@centos7 ~]# > test.txt [root@centos7 ~]# du -h test.txt 0 test.txt 2.使用true命令重定向清空文件 [root@centos7 ~]# du -h test.txt 4.0K test.txt [root@centos7

  • 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

  • Python实现将内容写入文件的五种方法总结

    目录 一.write()方法 二.writelines() 方法 三.print() 函数 四.使用 csv 模块 五.使用 json 模块 一.write()方法 使用 write() 方法:使用 open() 函数打开文件,然后使用 write() 方法将内容写入文件.例如: with open('example.txt', 'w') as f: f.write('Hello, world!') open() 函数是 Python 内置的用于打开文件的函数,其常用的参数及其含义如下: 1.f

  • JS实现导出Excel的五种方法详解【附源码下载】

    本文实例讲述了JS实现导出Excel的五种方法.分享给大家供大家参考,具体如下: 这五种方法前四种方法只支持IE浏览器,最后一个方法支持当前主流的浏览器(火狐,IE,Chrome,Opera,Safari) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>html 表格导出道</title> <sc

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

  • php中请求url的五种方法总结

    本文主要给大家介绍了关于php中请求url的五种方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 五种方法: 前三种都是php基本的文件操作函数 curl()是php扩展需要开启,linux下需要安装 exec()执行的是linux命令行下的命令wget下载远程文件 其中wget命令在本地虚机测试请求http://www.baidu.com时,没有成功,在远程服务器上却可以,考虑时DNS解析的问题,于是直接请求IP成功下载了index.html的文件. 这里只提供了方法,其中的

  • JavaScript实现数字前补“0”的五种方法示例

    本文实例讲述了JavaScript实现数字前补"0"的五种方法.分享给大家供大家参考,具体如下: 众所周知JavaScript中的数字是没有前置0的,因此需要我们自己进行操作来添加前置0,而且还得转换成字符串. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • 详解python解压压缩包的五种方法

    这里讨论使用Python解压例如以下五种压缩文件: .gz .tar  .tgz .zip .rar 简单介绍 gz: 即gzip.通常仅仅能压缩一个文件.与tar结合起来就能够实现先打包,再压缩. tar: linux系统下的打包工具.仅仅打包.不压缩 tgz:即tar.gz.先用tar打包,然后再用gz压缩得到的文件 zip: 不同于gzip.尽管使用相似的算法,能够打包压缩多个文件.只是分别压缩文件.压缩率低于tar. rar:打包压缩文件.最初用于DOS,基于window操作系统. 压缩

随机推荐