设计漂亮的样式表是一门艺术
设计漂亮的样式表不是一门暗黑艺术(如果用艺术家的眼光来看待这门艺术的话，那更多表现的是种对幸福的生活渴望和完美人生的追求. PS: 这是译者找到的最靠谱的解释.). 它需要持久的练习和全身心的投入, 但是, 有一些小窍门来帮你快速提升, 让你也成为一个CSS高手.
再接下来的文章里，我会演示一些自己在设计可读性强, 维护性强, 并容易调试的样式表时用到的技术.
文件的命名惯例
在所有的项目中我都遵循一种简单的命名习惯. 这是一种简单而有效的办法来维护CSS文件. 有很多设计师会给样式表起一些模糊的名字, 比如main.css, 或者style.css. 我觉得文件名可以更细致一点, 这样的话, 你可以很快的知道每个文件是做什么的.
这是我的一个客户的网站文件结构.
CSS 命名惯例
style_all.css
包含重置和一些适用于各个浏览器和操作系统的CSS代码. 而且最好把那些用内容管理系统中所见即所得编辑器生成的内容的样式放在这个文件里, 比如链接的颜色和元素的样式等等.
style_screen.css
这是包含整体样式的主文件. 一会儿我们会深入了解它.
style_screen_IE7.css
特别为IE7准备的样式表. 我做过的大多数项目不需要特别准备一个IE7的样式表, 这里只是让大家更加理解我所说的命名惯例.
style_screen_It-IE7.css
这是兼容所有IE7以下版本浏览器的样式表.
style_print.css
当你去掉所有图片, 仅仅显示好看而整洁的文字时就会用到这个用于打印的样式表.
这个命名惯例很复杂. 比如你要专门为IE6准备一个样式表, 就可以命名为style_screen_IE6.css. 如果是针对便携设备, 就可以命名为style_handheld.css, 如此等等.
我在开发的商业内容管理系统, 有这样一个功能就是检查样式表文件并自动使用适当的条件注释. 将来我也许会发布那部分代码(如果我能说服项目经理的话:P)
模块化
现在让我们深入探讨一下主样式表style_screen.css. 这个文件将来会变得很大, 所以把样式划分成一部分一部分是非常重要的.
我会在样式表的开头声明划分成哪几部分.
将CSS文件划分成许多部分
提示: 按ctrl+F(或者 Mac+F), 输入 =FORMS 就能直接跳转到表单样式的部分. 我发现这样特别节省时间.
定位
规定布局的结构, 定位基本的元素. 把页面分成头部, 内容部分, 侧边栏, 和页脚. 在开发一个新页面时, 首先要做的是把整体的框架搭建起来, 而不要先考虑细节.
先定义基本的样式结构
|
