HTML 和 CSS 代码保持精简，使页面性能达到最佳状态，让结构一目了然。

下面将分成三部分概述：

1. 精简重复代码

方法一：擅用多个 class 值定义。将重复运用到的样式，用同一个 class 命名，如果各自还有其他的样式，则各自应用的样式再另外命名一个 class。

<div class="one two">...</div>
<div class="one three">...</div>

上述两个 div，有一个共同的 class 命名，在 CSS 里面，用 .one 写的样式为它们共同使用的样式，.two 和 .three 为各自应用的样式。

方法二：将重复的样式在 css 里面合并成一个。

<div class="one">...</div>
<div class="two">...</div>
<div class="three">...</div>

上述三个 div 都用了不同的 class 命名，如果使用的样式都是一样的话， 在 CSS 里面就可以合并成：

.one, .two, .three { }

2. HTML 结构保持简洁

1）如无必要，尽量减少标签的嵌套。

<div>
  <div><h3>...</h3></div>
  <div>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </div>
</div>

上述 html 结构，在减少标签嵌套后的结构，如下所示

<div>
  <h3>...</h3>
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

2）多采用父级继承样式控制

<div class="one">
  <h3>...</h3>
  <ul>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

上述可以不必多处添加 class 命名，在 CSS 里面可以写为

.one h3 { }
.one ul { }
.one ul li { }

这样做既可以优化代码，又能让人一目了然。因为 div 是块级元素，即相当于一个盒子，然后里面会装各种东西，采用父级继承样式控制可以让人一眼就明白，哪部分内容是属于哪一个盒子里面装的东西。

3）多采用不同标签来控制网页表现形式

假如一个 div 里需要有三种不同颜色的文字

// 通常 html 写法：
<div class="one">
  <p class="txt1">...</p>
  <p class="txt2">...</p>
  <p class="txt3">...</p>
</div>

// css 里面的写法则为:
.txt1 { color:#ddd; }
.txt2 { color:#ccc; }
.txt3 { color:#999; }

上述可不必添加多个 p 标签及 class 命名，可优化为不同标签来控制，写法如下所示

// html 写法：
<div class="one">
  ...
  <p>...</p>
  <span>...</span>
</div>

// css 里面的写法则为：
.one { color:#ddd; }
.one p { color:#ccc; }
.one span { color:#999; }

3. CSS 结构保持简洁

1）多采用全局样式

如果 Html 里面，有全局共用的样式，则可写成全局样式，全局样式一般是直接写 Html 标签样式 (如：body, h1, h2, …)

// 整个网站字体一致，则可写成:
body { font:Arial; }
如果是整站，可以将文字标签写为全局样式：
h1 { font-size:28px; }
h2 { font-size:26px; }
h3 { font-size:24px; }
h4 { font-size:20px; }
h5 { font-size:18px; }
h6 { font-size:16px; }
p { font-size:16px; line-heigh:180%; }
// 如果整个页面最外围盒子（即容器）大小一致，可统一命名一个 class 为container，则可写成:
.container { width:90%; margin:0 auto; }

2）CSS 书写先后顺序，应按照以下规则书写

1. 位置属性 (position, top, right, z-index, display, float 等)
2. 大小 (width, height, padding, margin)
3. 文字系列 (font, line-height, letter-spacing, color- text-align 等)
4. 背景 (background, border 等)
5. 其他 (animation, transition 等)

4）CSS 采用缩写属性（简写中可省略其中一些项）。

a. 边框 border 属性：

border-width:1px;
border-style:solid;
border-color:#000;

// 可简写为：
border:1px solid #000;

b. 背景 background 属性：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;

// 可简写为：
background:#f00 url(background.gif) no-repeat fixed 0 0;

c. 字体 font 属性：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

// 可简写为：
font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

d. 列表 list 属性

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

// 可简写为：
list-style:square inside url(image.gif);

尽量都采用属性缩写的形式：

3）前面提到多采用父级继承样式控制，可以让结构变得一目了然。