Dreamer

[翻译] 10 Best CSS Practices to Improve Your Code(10个改善CSS的最佳实践)- 1

October 31, 2010 by dreamer

原文链接:10 Best CSS Practices to Improve Your Code

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

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

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

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

1.保持条理性

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

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

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

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

  • 重置和重写
  • 链接和字体
  • 主布局
  • 二级布局结构
  • 表单元素
  • 其他杂项
  • 2.标题、日期和签名

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

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

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

    3.搞一个模板库

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

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

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

Posted in: Interaction&Front-end, User Interface Tagged: code, css, programing

Categories

  • ACG
  • Flash3D
  • Interaction&Front-end
  • Life
  • Mobile
  • User Interface
  • Visual Design
  • 工作整理
  • 懒人食谱
  • 服务器

Recent Comments

  • dreamer on Kill IE6?
  • 曉行 on Kill IE6?
  • Benny on 互动设计是神马?
  • 人人都爱vancl | Dreamer on 互动设计是神马?
  • dreamer on http协议复习笔记摘要

Tags

3dmax 3Z 403 960 Grid System acg android apache call to action code collada css CSS framework dae Designing Interactions Designing Interfaces diy Don't Make Me Think flash G7 gallery html http httpd.conf ie6 iPad 2 mysql papervision3d php programing PV3D realign shelock holmes wap web window wordpress xhtml xhtml mp 互动设计 产品 便当 凡客 咖喱 手机 手机网站

Copyright © 2025 Dreamer.

Mobile WordPress Theme by themehall.com