网络编程
位置:首页>> 网络编程>> 网页设计>> 10条改进你的CSS代码的方法

10条改进你的CSS代码的方法

作者:tomie 来源:代码人 发布时间:2010-03-20 22:07:00 

标签:CSS,代码,组织性,优化

如何让你的CSS代码更具有组织性和易维护性,为什么你的样式表总是臃肿和混乱的?有些时候是源于一开始书写时的混乱和草率,有时候也是因为后期的维护和各种HACK的需要,但不管如何,书写出干净、易于管理的CSS很简单,下面是10条改进的方法:

1.井井有条。

和许多其他的事情一样,首先要保持一个良好的组织性,而不是想到ID就写ID,想到CLASS就写CLASS,而要使样式表保持一个连贯的结构,这能让你充分的利用样式的继承。首先定义你最常用的项目,然后是不太常用到的然后是其他,这会使你的CSS属性得到正确的继承,当你需要重新定义一个特殊的风格时会很简单,也会使得你以后对该CSS的修改和编辑更加迅速,因为它遵从简单、可读、有逻辑的结构。
一个良好的CSS结构应该包括以下一些部分:

  1. 重置和覆盖(Resets & overrides)

  2. 链接和字体(Links & type)

  3. 主要布局(Main layout)

  4. 次要布局结构

  5. 表单元素

  6. 杂项

下图展示的就是一个示例:

2.风格名称、创建时间、签名。

让别人知道是谁写的样式表,当他们有问题的时候可以及时的请教,这在制作模板或者主题以及团队合作时非常有用。

/*=========
Daimaren style
Copyright 2010  by Tomieweb@gmail.com
for  - www.daimaren.cn
 
swatch colors
-------------------
ff0000 - red
0000ff - blue
13437a - dark blue
e1e1e1 - light gray
===========*/

swatch colors里记录了此风格用到的一些颜色色值,和它们对应的颜色描述,这么做是方便以后的编辑工作,你不用再打开PS或者其他取色软件在去找颜色,翻到样式顶部拷贝即可。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com