DIV布局如何正确的使用 id 和 class
OK，我们会用两个div来表示它们。问题来了，应该使用id还是class？按照常规的理解，一个页面只会有一个主栏，一个侧栏咯，所以当然应该用id。文档写成这：
<div id="main-col"></div>
<div id="side-col"></div>
#main-col { float: left; width: 700px;}
#side-col { float: right; width: 200px; }
也是很赏心悦目的，不是么？所以我决定用id。
于 是页面做好了，网站做好了，上线了，运营了，访问量大了。这时候公司决定，嗯，我们应该在一些页面中加几个通栏广告。“通栏”哦！这就意味着它必须横跨主 栏和侧栏，把它们俩拦腰截断。于是我们重新“发明”一个样式：banner，让banner来一个clear:both; 然后放到页面中间去阻止掉两个栏的浮动。然后再在banner的后面继续分两栏。下面是示意图：
所以HTML应该是这样：
<div id="main-col"></div>
<div id="side-col"></div>
<div alt="DIV布局怎么正确的使用 id 和 class">
喏，老板要来一点不同的，让把导航栏放在左侧。这个没问题，用一个ul就搞定拉。我把它的id设置成main-menu但是过了一会儿，他说，嗯，为了可用性（咳咳。。），我们需要把菜单分成两部分。就像：
呃。。好说，分成两个ul就好了。但是，它们的id都叫main-menu么？？哎，老问题又来了。
例子举了这么多，你可看得出，仅仅因为“只出现一次的元素”这个理由，就决定给它用id而不是class，这是绝对行不通的。因为你几乎很难判断某个元素是不是一定只出现一次。但是，这样的分析会得出一个可怕的结论：所有的样式都应该用class。
对 此，我其实并不怀疑。事实上，以我的看法，95%以上的样式，都应该通过class而不是id来设置。或者说，除非是一些很细微很特殊的位置，可以使用 id来设置样式，其他的样式都应该用class来设置。这个结论似乎和WaSP的圣经书《网页重构》里讲的矛盾，因为他老人家是专门批评了所谓的 classitis（class麻疹，见该书148页）。但是很抱歉，铁证如山的事实底下，我不得不否定他那句“热爱id”（见该书150页）。
当然，我很希望我是错的，毕竟背叛经典是一件很让人不舒服的事情。所以欢迎大家来讨论，指出我的错误。更重要的是，对于我举出的哪些尴尬的例子给出一个更好的解决方案。
总结：尽量用class而不是id来控制样式的理由：
可 维护性。你不能保证你用id的元素只在页面中出现一次，即使在网页设计初稿中确实是只有一次。 id可能被Ajax程序员使用。如果页面要用ajax的话，某些元素的id值应该由Ajax程序员而不是页面设计师来决定，至少应该是双方共同商定。那 么，你怎么能放心你的id值既用来设置CSS样式，又用来供JS调用呢？ 同一个元素可以定义多个class，却只能有一个id。你明白我的意思了吧？ id的优先级高于class。所以如果对于某个特定的元素，我们想赋予特定的样式，可以给它加id。但是反过来，如果我们一开始就是用id，你去加 class是没有效果的啦。
最后，关于Zeldman老先生讲的classitis。我的理解是不要为了某个特定的样式置 顶一个特定的class。尽量创造一些能够重复使用的class。而id由于不能重复，反而才容易造成iditis呢。到时候我们的网站会出现 search-box-top, search-box-bottom，甚至search-box-under-the-header-but-above-the-main-menu， 哈哈。更可怕的是，它们的属性定义其实都一模一样。
?
