避免滥用class样式

多类症

有些初学者给大部分元素都添加类，以便更方便的控制它们，这种现象叫“多类症”，产生了大量无意义的代码。我们应该尽可能少使用类，通过包含框选择器识别元素。

示例：

<div class=“news”><h1>标题新闻</h1><p>新闻内容</p></div>

不要再为<h1> ,<p>标签添加class类，而应该通过选择器识别元素。

news h1{ color:black }
news p{ color:blue }

使用语义化标签

标签都拥有不同的语义，这样就不用为它们定义id和class，也方便CSS选择。

HTML包含丰富的标签，要正确选用它们。

<h1> <h2> <h3> <h4> <h5> <h6>

<p> 定义段落文本

<ul><ol><li> 等：定义信息列表、导航列表、榜单结构等

<table><tr><td>等：定义表格结构

<form><input><textarea>等：定义表单结构

<span>：定义行内包含框

示例：

<header>页眉区域</header>
<section>
   <article>1.主体内容区域</article>
   <nav>2.导航栏</nav>
   <aside>3.其它栏目</aside>
</section>

<header>: 定义section或page的页眉

<section>: 对网站页面上内容进行分区

<article>：定义文章

<nav>：定义导航条

<aside>：定义页面内容之外的内容，如侧边栏、服务栏等

<footer>: 定义section或page的页脚

减少冗余标签

为了减少不必要的标签，应该避免不必要的嵌套。

示例：

<div id=“nav”><ul><li></li><li></li></ul></div>

完全可以将最外层div删除，直接在ul上设置id。过度使用div是结构不合理的一种表现，也容易造成结构复杂化。