重温CSS系列（一）

由于最近帮老师做一些前台的页面，一向不喜欢做前台的我，不得不与Html和CSS打交道，虽然以前对于Css有一定的了解，但是前台页面做完了到不同的浏览器上测试，效果迥异（chrom、IE6、IE7、IE8、firefox），这就是对于CSS的应用不到位才导致了效果相差巨大，和一些在公司做前台的师兄交流了 一些，觉得CSS并不是想象中的那样简单，有些东西是要掌握的，所以重新温习了一系列的CSS知识，与大家分享。

 ID还是类

常常很难决定一个元素应该使用ID还是类名。一般原则是，类应该应用于概念上相似的元素，这些元素可以出现在同一页面上的多个位置，而ID应该应用于不同的唯一的元素。但是，究竟哪些元素是概念上相似的，哪些元素是唯一的？

例如，假设你的网站顶部包含主导航，在搜索结果页面的底部包含基于页面的导航，在页脚上还有另一个导航。是给它们分配不同的ID（比如main-nav、page-nav和footer-nav），还是都给它们指定nav类，然后根据它们在文档中的位置应用样式？我以前喜欢使用前一种方法，因为它的针对性更强一点儿。但是，这有几个问题。如果我现在需要把搜索结果导航放在搜索页面的顶部和底部，或者需要在页脚中有两级导航，那会怎么样？

如果使用大量ID，很快就会难以找到唯一的名称，最终不得不创建非常长、非常复杂的命名约定。因此，现在我比较喜欢使用类名。只有在目标元素非常独特，绝不会对网站上其他地方别的东西使用这个名称时，才会使用ID。换句话说，只有在绝对确定这个元素只会出现一次的情况下，才应该使用ID。如果你认为以后可能需要相似的元素，就使用类。保持命名约定通用，并且使用类，就不会出现一长串ID选择器都与非常相似的样式相关联的现象：

#andy, #rich, #jeremy, #james-box, #cennydd, #paul, #natalie, #sophie {
  font-size: 1.6em;
  font-weight: bold;
  border: 1px solid #ccc;
}

只需用一个普通的类替代它们：

.staff {
  font-size: 1.6em;
  font-weight: bold;
  border: 1px solid #ccc;
}

由于类具有灵活性，所以它们是非常强大的。同时，它们也可能被过度使用或滥用。CSS新手常常在几乎所有东西上添加类，从而试图更精细地控制它们的样式。早期的WYSIWYG编辑器也倾向于在应用样式的每个地方都添加类。许多开发人员在使用编辑器生成的代码学习CSS时继承了这个坏习惯。这种现象称为"多类症"（classitis），在某种程度上，这和使用基于表格的布局一样糟糕，因为它在文档中添加了无意义的代码。

<h2 class="news-head">Andy wins an Oscar for his cameo in Iron Man</h2>
  <p class="news-text">
  Andy Budd wins the Oscar for best supporting actor in Iron Man
  after his surprise cameo sets Hollywood a twitter with speculation.
  </p>
  <p class="news-text"><a href="news.php" class="news-tink">More</a></p>

在前面的示例中，通过使用一个与新闻相关的类名，每个元素都被标识为新闻的一部分。这使新闻标题和正文可以采用与页面其他部分不同的样式。但是，不需要用这么多类来区分各个元素。可以将新闻条目放在一个部分中，并且加上类名news，从而标识整个新闻条目。然后，可以使用层叠（cascade）来识别新闻标题和文本。

<div class="news">
  <h2>Andy wins an Oscar for his cameo in Iron Man </h2>
     <p>Andy Budd wins the Oscar for best supporting actor in Iron Man
after his surprise cameo sets Hollywood a twitter with speculation.</p>
     <p><a href="news.php">More</a></p>
</div>

只要你发现类名中出现了重复的单词，比如news-head和news-link或者section-head和section-foot，就应该考虑是否可以把这些元素分解成它们的组成部分。这会让代码更"组件化"，会大大提高灵活性。

以这种方式删除不必要的类有助于简化代码，使页面更简洁。稍后，将简要讨论CSS选择器和为样式寻找目标。无论如何，这种对类名的过度依赖是完全不必要的。如果你发现自己添加了许多类，那么这很可能意味着你的HTML文档的结构有问题。

5. div和span

有助于在文档中添加结构的一个元素是div元素。许多人误以为div元素没有语义。但是，div实际上代表部分（division），它可以将文档分割为几个有意义的区域。所以，通过将主要内容区域包围在div中并分配content类，就可以在文档中添加结构和意义。

为了将不必要的标记减到最少，应该只在没有现有元素能够实现区域分割的情况下使用div元素。例如，如果使用主导航列表，就不需要将它包围在div中。

<div class="nav">
  <ul>
     <li><a href="/home/">Home</a></li>
     <li><a href="/about/">About Us</a></li>
     <li><a href="/contact/">Contact</a></li>
  </ul>
</div>

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

<ul class="nav">
  <li><a href="/home/">Home</a></li>
  <li><a href="/about/">About Us</a></li>
  <li><a href="/contact/">Contact</a></li>
</ul>

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

div可以用来对块级元素进行分组，而span可以用来对行内元素进行分组或标识：

<h2>Andy wins an Oscar for his cameo in Iron Man </h2>
  <p>Published on <span class="date">February 22nd, 2009</span>
by <span class="author">Harry Knowles</span></p>

尽管目标是让代码尽可能简洁且有意义，但是有时候为了以自己希望的方式显示页面，无法避免添加额外的无语义的div或span。如果是这样，那也不必过分为此担心。我们正处在一个过渡时期，CSS 3有望提供更强大的文档控制能力。而且，实际需要常常比理论出现得早。关键是知道在什么时候必须进行折中，并且要有正确的原因进行折中。