如何写出轻便、更快的CSS代码

网络整理 - 07-27

为什么我们的CSS变得一团糟——我们真的很容易陷入这样的困惑中。

有时这是一开始就马虎编程的结果,有时是由于后期多重的附加代码(hacks)和修改造成的。

无论是哪种原因,这都不是无法避免的。写出干净,超级可管理的CSS很简单,只要你走对了路,你的代码会更便于今后的维护和编辑。

写出更轻巧、更快并且更不会让你头疼的CSS,以下这10个技巧将会提高你这方面的能力。

1.保持条理性

像任何事情一样,让自己保持条理性(有组织)是值得的。采用清晰的结构,而不是随心所欲地组织id和class(别想到啥就写啥)。

这会有助于你在心里记住CSS的级联性,并让你的样式表能够利用样式继承。

首先声明最通用的item(id class或者是html element),接下来是稍微不那么通用的……依此类推。这让你的CSS能适当地继承属性,当需要的时候,重写一条特殊的样式会更容易。将来编辑CSS时也会更快,因为它遵循着一个易于阅读的逻辑结构。

用一个对你来说最好使的结构,同时在心里想着将来的编辑和其他开发人员。

  • 重置和重写
  • 链接和字体
  • 主布局
  • 二级布局结构
  • 表单元素
  • 其他杂项

    2.标题、日期和签名

    让其他人知道谁写了你的CSS,什么时候写的,以及如果有问题可以联系谁。在设计模板或主题时这非常的有用。

    稍等片刻…那些色标数字是咋回事?多年以来,我发现,简单列举出我的样式表里常用的颜色,在初次开发和后期编辑时真的非常有帮助。

    这节约了你打开Photoshop从设计图里吸一个颜色,或者在这个网站的风格指南(如果这个东东存在)里查颜色。如果你需要那个特定的蓝色的HTML代码,只需要翻到注释处复制它就行了。

    3.搞一个模板库

    一旦你选定了用一个结构,剥掉所有不通用的并把文件存成一个CSS模板,以便将来使用。

    你可以为多种用途保存多个版本:两栏布局、博客布局、打印、移动等等……Coda(OSX的编辑器)有一个优秀的Clips特性能让你很简单的做到这些。很多其他的编辑器也有类似的特性,不过甚至是一批简单的文本文件也能很好地工作。

    每次都从头开始重写每一个样式表是很疯狂的,特别是每个都是采用一样的约定和方法。