Chikoo's Blog

1：关于id的命名
在分配ID和类名时，一定要尽可能保持名称有意义并与表现方式无关。例如，可以给导航元素分配ID rightHandNav，因为你希望它出现在右边。但是，如果以后将它的位置改到左边，那么CSS和(X)HTML就会不同步。所以，将这个元素命名为subNav或secondaryNav更合适。这种名称解释了这个元素是什么，而没有涉及如何表现它。对于类名，也是这样的。即使你希望所有错误消息以红色显示，也不要使用类名red，而应该选择更有意义的名称，比如error或feedback。
在写类名和ID名时，需要注意区分大小写。CSS大体上是不区分大小写的语言。但是，在标记中实体（比如类名和ID名）是否区分大小写取决于标记语言是否区分大小写。如果使用XHTML，那么类名和ID名是区分大小写的；如果使用常规的HTML，那么是不区分大小写的。处理这个问题最好的方式是保持一致的命名约定。所以，如果在(X)HTML类名中使用驼峰式大小写（camel case），那么在CSS中也采用这种形式。

2. div和span

有助于在文档中添加结构的一个元素是div元素。许多人误以为div元素没有语义意义。但是，div实际上代表部分（division），它提供了将文档分割为有意义的区域的方法。所以，通过将主要内容区域包围在div中并分配ID mainContent，就可以在文档中添加结构和意义。
为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如，如果使用主导航列表，那么不需要将它包围在div中。


可以完全删除div，直接在列表上应用ID：


过度使用div常常称为“多div症”（divitus），这是代码结构不合理而且过分复杂的一个信号。一些CSS新手会尝试用div重建自己原来的表格结构。但是，这只是用一套不必要的标签替换了另一套不必要的标签。实际上，应该使用div根据条目的意义或功能（而不是根据它们的表现方式或布局）对相关条目进行分组。
div可以用来对块级元素进行分组，而span可以用来对行内元素进行分组或标识：


一般不需要对行内元素进行分组或标识，所以使用span的情况比div少。在实现图像替换等效果时会看到span，在这种情况下，它们用做额外的钩子，可以应用额外的样式。
尽管目标是保持代码尽可能简洁且有意义，但是有时候为了以希望的方式显示页面，无法避免添加额外的无语义的div或span。如果是这种情况，那么也不必过分为此担心。我们正处在一个过渡时期，CSS 3有望提供更强大的文档控制能力。在目前，现实世界的需要常常比理论出现得早。关键是知道在什么时候必须进行折中，并且要根据正确的原因进行折中。
3.关于quirks mode模式

这个名词同事昨天刚问过我，我 当时也不很清除，只能告诉他，IE这样的就是用这种模式，他们不严格的按照w3c的标准。而ff就是标准模式，他们严格按照w3c的模式。
现在我在这本书上找到了比较权威的解释如下：
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种表现模式：标准模式和怪异模式（quirks mode）。在标准模式中，浏览器根据规范表现页面；在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。怪异模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
对于这两种模式之间的差异，最显著的例子涉及Windows上IE专有的框模型。在IE 6出现时，在标准模式中使用正确的框模型，在怪异模式中使用老式的专有框模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在怪异模式中使用有缺点的IE框模型。
表现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。
Mozilla和Safari还有第三种模式，称为“几乎标准的模式（almost standards mode）”，除了在处理表格的方式方面有一些细微的差异之外，这种模式与标准模式相同。
4．关于“通用选择器”

惭愧，这个也是昨天才知道的。还是看了“暴牙齿”的一段代码才知道的。给出比较权威的解释：
通用选择器可能是所有选择器中最强大却最少使用的。通用选择器的作用就像是通配符，它匹配所有可用元素。与其他语言中的通配符一样，通用选择器由一个星号表示。通用选择器一般用来对页面上的所有元素应用样式。例如，可以使用以下规则删除每个元素上默认的浏览器填充和空白边：


在与其他选择器结合使用时，通用选择器可以用来对特定元素的所有后代应用样式，或者跳过一级后代。
5．对文档应用样式

可以将样式放在style标签之间，从而直接在文档头上添加样式，但是，这不是对文档应用样式的好方法。如果要创建使用相同样式的另一个页面，那么就不得不在新页面上复制CSS。如果以后要修改样式，那么就不得不在两处进行修改，而不是在一处。幸运的是，CSS允许将所有样式放在一个或多个外部样式表中。将外部样式表附着到网页上有两种方法。可以链接它们，也可以导入它们：


Netscape 4等老式浏览器不理解导入。因此，可以使用导入对老式浏览器隐藏它们不理解的复杂样式。在前面的示例中，链接了一个简单的样式表，其中包含大多数浏览器都能理解的基本样式。然后导入了一个比较高级的样式表，其中包含比较复杂的样式，比如浮动和定位布局。可以利用这种方法分别为老式浏览器和比较现代的版本创建不同的设计。
并非只能导入到(X)HTML文档中。还可以从另一个样式表导入样式表。因此，可以从(X)HTML页面链接基本样式表，然后将复杂的样式表导入这个样式表（见图1-4）：


图1-4  可以将多个样式表导入一个样式表，然后将这个样式表链接到HTML页面中


这可以降低(X)HTML文档的复杂性，并且允许在一个位置管理所有样式表。导入规则需要放在样式表的最前面，否则它们可能工作不正常。因为先考虑导入的样式表，然后再考虑链接的样式表，所以一定要记住链接的样式表中的规则会覆盖导入的规则。
尽管从理论上说可以将样式表导入到本身也被导入的样式表中，但是对这种链式结构或多层嵌套的支持不完善。因此，应该避免两层以上的嵌套导入。
现在使用Netscape 4的人已经非常少了，所以可能不需要太为这种浏览器操心。可以省去简单的链接样式表，直接导入样式。但是Windows的IE 5/6有一种奇怪的特性，它会影响只使用导入规则的页面。当装载受影响的页面时，在最终显示样式之前，页面暂时以无样式的形式显示。这个bug称为“Flash of Unstyled Content”（简称为FOUC）bug。在文档头中放一个link或script元素可以避免这个bug，所以即使不为支持Netscape 4操心，可能仍然需要链接基本的样式表，然后再从那里导入样式。
对于简单的Web站点，可以只使用一个CSS文件。对于大型的复杂站点，对样式表进行分割以便简化维护是一种好做法。如何分割样式表是需要仔细考虑的。我一般用一个CSS文件处理基本布局，用另一个文件处理版式和设计修饰。这样的话，在布局确定之后，就很少需要修改布局样式表。这可以防止布局样式表被意外地改动或破坏。
还可以进一步细分，比如用单独的CSS文件处理颜色。这样的话，如果希望提供新的颜色方案，就只需要创建一个新的颜色样式表。如果站点上有许多表单，那么可以用单独的CSS文件处理所有表单样式。可以只在需要时链接这个文件，从而减少最初的下载开销。如果站点上的一些页面与站点的其余部分很不一样，那么可以考虑让它们使用它们自己的CSS文件。例如，如果主页的布局与站点的其余部分很不一样，那么可以为主页创建单独的CSS文件。
请记住，每个CSS文件都意味着要对服务器进行一次额外的调用。这会影响性能，所以一些开发人员喜欢使用一个大型CSS文件而不是多个小文件。最终的选择实际上取决于实际情况，而且在某种程度上这是一个个人喜好问题。我倾向于尽可能保持灵活性和维护的简单性。