CSS教程:创建性感的CSS样式表(3)

05.组织选择符和声明

经常的,要保持CSS的整洁度和有序性.我喜欢将选择符按照样式的类别进行组织划分.

• 重置样式(reset styles)
• 排版样式(typography styles)
• 布局样式(layout styles (header, content, footer, etc.))
• 模块和widget样式module or widget styles
• 其他(etc).

然后,在每个组里面,我按照DOM等级将选择符组织划分:

IT教学网

• 任何父级元素样式(any parent styles)
• 块级元素样式(block-level element styles) (段落,列表等.)
• 内联元素样式(inline element styles) (链接,缩写等.)
• 其他(etc).

然后在上面划分的基础上进行详细的划分:

• 段落(paragraphs)
• 引用(blockquotes)
• 地址(addresses)
• 列表(lists)
• 表单(forms)
• 表格(tables)
• 其他(etc).

最后,我按照样式类型组织CSS声明 Webjx.Com

• 位置样式(positioning  styles)
• 浮动/清除浮动样式(float/clear styles)
• 显示/可见样式(display/visibility styles)
• 空间样式(spacing styles)(margin, padding, border)
• 尺寸样式(dimensions styles)
• 排版相关样式(typography-related styles)(line-height, color, etc.)
• 其他样式(miscellaneous styles)(list-style, cursors, etc.)

许多人喜欢根据声明的字母顺序来排列,这种方法对我来说可能不太适合,但可能对你来说会非常适合.不过一旦你选择了任何组织方法,就最好坚持下去以保持其统一性. IT教学网

06. 创建框架(framework,库)

当你在编写CSS时,如果你已经发现你经常反复的做同一件事情,考虑一下创建一个框架或库可能是个不错的主意.将一个样式表组合组成的框架作为你的网站的基础能够缩短的你开发时间.较为典型的样式表基本上都包含以下内容:

• screen.css - 一个screen CSS文件包含你所有应用在屏幕显示上的所有样式,可以选择性的导入附加样式,如以下样式表文件:
• reset.css - reset CSS文件被用于重置所有默认的浏览器样式,让我们更容易的完成各种浏览器下的兼容性问题.
• typography.css - typography CSS文件被用来定义字体,大小,行间距,字间距和字体颜色.
• grid.css - grid CSS文件被用来组织布局和结构.通过定义基本的头部,底部和列设置为你网站的创建轮廓,线框模型(winframe)
• print.css - print CSS文件包含页面被打印时显示的样式.

一个CSS框架的例子是由Olav Bjørkøy创建的Blueprint framework,开发人员主要为Jeff Croft 和 Eric Meyer等人.另一个流行的框架就是Yahoo! User Interface Library建立的.不过许多开发人员认为这些成型的框架包含的标记和CSS有那么一点臃肿,当然也包括了太多的表现类(class)和属性名称.

Webjx.Com

声明:当我在写这篇文章时,Jeff Croft发表了一篇主题为What’s not to love about CSS frameworks?(什么让你摒弃CSS框架),在这篇文章的评论中和谈及他听说许多人说我严重反对CSS框架,我不知道这从何说起,但是我仍然要重申一下我的观点,我不反对使用CSS框架,并且非常坚持使用它们.

最好的结果就是你最好创建适合自己或者你所在组织的框架.