实战问题总结

上面的代码有哪些问题呢?

1. 最外层大的功能区块要使用 id 选择器。像 class="header"、class="title"、class=footer这些 class 的名称太常见了，如果在css 中这样定义样式.header{margin: 10px}很容易出现误伤，因为这个 class 很有可能在其他地方也被使用。正确的写法是最外层功能区块用 id:<div id="header"></div> <div id="footer"></div>。

2. 命名要能体现功能,比如 像 header、footer倒还好，根据名字我知道它在页面的作用，但像title、text1、text2让人不明所以。如何命名呢？最简单的方法是看看页面上对应区块是有什么作业，然后翻译成英文，用中横线链接即可。比如id="services"、class="contact-wrap"。

3. 对于一个单词不好表示的命名用中横线而不是下划线连接,全小写(这虽然不是强制规定，但有这个意识容易养成好的代码习惯)。比如footer-wrap

4. 去除无用标签。 比如 items 的父容器只写了个 div，这样很不合适。要不把这个 div 加个 class 或者 id，让它体现一定功能。要不直接把这个 div 去掉。

5. 根据页面功能去写样式。比如上面代码中写了两个 .items ，每个 items 里面包含两个产品。代码作者的意思可能是因为页面上该区域有两行，每行两个元素。但实际上这样写不但出现了很多无用标签，让语义化也大打折扣，在现实实现的时候也很麻烦。 正常的写法是一个 ul,下面4个 li，设置浮动，换行自己会换的。

6. 样式无重用。比如上例中，text1-wrap和text2-wrap的功能是类似的，都是让区块居中。我们可以用一个text-wrap代替即可。

下面是修改后的 html

http://js.jirengu.com/welugegasi/edit?html,output

体会一下，.layout的作用，以及添加在不同位置起到的作用。

• 对 .layout只添加了width: 900px;margin: 0 auto;这两条样式，这样把 layout 的功能单一化，可以添加在其他元素上使用。试想如果你在里面加了margin-top：20px，在#header是能用了，在 #footer就没法用了
• 在 #header 添加了个子元素 .layout，#header里面的内容都被.layout包裹。而在#content里却直接把layout这个 class添加到#content上。为啥用法不同呢？那是因为场景不同。 对于#header因为下边框是全屏的，如果把.layout直接添加到#header上那边线不可能全屏了。#footer也是同样。 然而对于#content，因为所有内容都是居中固定宽度，所有可以没必要在多添加个标签。

http://js.jirengu.com/fag/1/edit?html,console,output