Pro CSS Techniques 读书笔记（五）

http://www.ctba.cn/blog/entry/2241

CSS 文件管理

至于原因不必赘述。无论是单枪匹马还是团队作战，为 CSS 制定一套一致的标准，可以最大限度地降低日后的维护成本。

CSS 文件路径

文件路径在一定程度上取决于所用的后端服务器和应用配置，一般情况下，CSS 文件的路径往往与他们的 URL 有直接关系，而另一些现代网络应用框架如 Django、RoR，他们的 URL 结构与服务器目录结构是不同的。无论哪种，只要确保自己和团队以及 URL 本身能容易找到就哦了。

关于存放目录的命名，大部分人都习惯于建立 css, style 这样的目录统一存放，当然也可以建立一个包含网站资源的目录，比如 resources, media, site 等，其中包含 css、img、flash、js 等，完全取决于自己。不过强烈建议将所有 css 放在一个目录下维护。

类和 id 名称的惯例

也是个习惯的问题，不过目前见到最多的就三种：使用下划线“_”分割多单词（俺倾向这种，可读性比较强）、使用连字符“-”分割、还有就是开发人员的比较习惯的“骆驼拼写法”（如 mainContent）。接天际那个项目时虽然拿到了规范文档，但看到他们的实际作业还是比较混淆，头部注释中躺着3位大哥的名字，每个人的习惯各不相同。不过他们也承认目前还在不断规范中。

所有属性一行 VS 每行一种属性

css 对格式没有固定要求，可以说只要有类或选择符名称，且他们的属性被尖括号包起来了，每个属性都以分号分割就可以，至于空格、缩进完全取决于个人风格，这也造成了代码格式的混乱，也就更有必要规范。不过格式宽泛有个好处，就是可以任意缩减不必要的空格实现代码层的压缩:)

所有属性一行，比如：

#header { height: 60px; margin: 0 auto; padding: 10px 5px 5px }

印象中国外比较流行，好处是比较方便查找，缺点是不方便修改；

每行一种属性，比如：

#header {
   height: 60px;
   margin: 0 auto;
   padding: 10px 5px 5px
}

这样写的好处是每一个属性都方便阅读和修改，当然相应的也占用了比较大的空间，尤其是属性比较多时，在查找时略逊于一行写法。不过我还是倾向于这种，毕竟之后会统一压缩，开发过程中，代码是给人看的。

特点排序

同样是个自我规范的过程，比如先边距（padding），后间距（margin），再边框（border）等等；还有一些人是按字母排序的，这种排序方式的好处是容易跟踪以避免重复。我的习惯是先按类来分，比如控制区域格式的（padding, margin, border 等）放在一起，控制内容的（font, line-height, background 等）放在一起，然后尽可能的在不破坏大类的基础上按塔状上下排列。

用缩略语来节省时间

关于这点在一篇优化文章中被指出影响渲染效率，那篇文章被转来转去，但都没有转载者自己的看法，而且原文只是一个概述，至于到底影响有多大也没细说。所以，我依然会以简洁为由继续使用缩略语来描述风格。况且缩写本来在“网站重构”就是被推崇的节省代码的方式。

缩略方式不细说，一搜一大片，这里要提醒注意的是 font 缩略语的顺序：

font: 字型（是 normal 还是 bold） 字号 字体
font: bold 12px Georgia, "Times New Roman", Times, serif

颠倒顺序会出问题。顺便推荐个 Dustin Diaz 的 CSS 缩略向导，包括了几乎所有缩略语特性，相应的例子和注意事项：http://www.dustindiaz.com/css-shorthand/

CSS 注释语法

/* 单行 css 注释 */
/* 多行 css 注释
   多行 css 注释 */

代码标记

h1 span {
   color: #eee; /*将 h1 中的副标题标为灰色以区分 —— mockee, 12/20/2008 */
}

为元数据注释

/* ---------------------------------------
   Author: Mockee Kaavie
   File: /theme/default/css/src/grid.css
   Usage: Style for screen(default)
   Format: 1 tab indent(4 spaces), LF, UTF-8, no-BOM
   Date: 2008-12-20 15:38:32 +0800 (Sat, 20 Dec 2008)
   --------------------------------------- */

“代码术语”的注释

/* -----------------------------
   Main Purple: #50017c
   Lighter Purple: #732799
   Accent Orange: #f80
   Accent Green: #9c0
   ...
   ----------------------------- */

作用显而易见，方便参考、复制粘贴字体以及任何需要不断重复的东西。

为 CSS 规则排序

上面提到了属性的排序，这里说说规则排序，有以下三种方式：

1. 从一般到特殊
比如先 body、页眉、段落、列表、表格、表单等会应用于整个文档的，然后是稍微具体一些的如某 div 中使用了后代选择符的元素，最后可以更具体些，比如单独列表的风格等；

2. 根据规则出现的顺序

比如从页眉的样式开始，然后是主要部分的样式，最后是页脚；

3. 根据我那个站的页面或分区

简单的例子，一个个人站点的规则分组可能是：主页、关于、博客等

以上三种方法又都可以联合起来应用。

CSS 框架

什么是真正的框架？简单的说，就是一些有用的代码的集合。这些代码会呈现最佳实例，并能让你更快更容易地引导、搭建和运行你的网站。目前出现的 CSS 框架（参见我之前提到的 Top 12 CSS Frameworks）大都做到了以上提到的规范。参考之后制定一个真正适合自己的规范和框架才会让其发挥最大的作用。

接下来就要谈谈有意思的 Hacks 和 Workarounds 了:)