首先，重点推荐的是把css部分独立出来，也就是把具体内容和外观表现分离，只有一个文件应用到时可以在同一个文件中分离，多个文件公用一个样式表时，一定建立一个单独的样式文件，这样使得对内容的更新维护更直观，对外观表现修改或者改版更容易(只需要修改一个样式属性，所有调用这个class的地方都会改变)。

<style type="text/css" rel="stylesheet">
.highlight{
  color:#f00;
}
</style> 

<link rel="stylesheet" href="css/master.css" type="text/css" /> 

其次，所有的html标签都是可以定义样式的，且定义以后，所有页面中用到这个标签的地方都会起作用，如果只想对某个区域的同一类标签进行格式化，可以给这个区域定义一个id，定义样式的时候在标签前加id就行了。这样可以很大程度地减少定义样式的数量。

h3{
  margin:10px 0;
  font-size:1.3em;
}
p{
  text-indent: 2em;
}
#highlight h3{
  margin:5px 0;
  font-size:1.1em;
}
#highlight p{
  text-indent: 0;
} 


css属性合并，把边框，字体，背景等同一元素的不同属性合并到一起，省时省力。

border-color: #ccc;
border-style: dotted;
border-width:1px; 

border:1px dotted #ccc; 

给某个元素同时使用多个class，各个class之间用空格隔开(但是id只能指定一个且在页面中唯一的，不能多次使用)。

<p class="hightlight colored bordered">...</p>

结构HTML和行为事件JS的分离，能够让不同的代码分别独立，便于修改和维护，也便于重复利用，而且结构明了，代码简洁。

下面是一个简单的显示隐藏更多内容的例子：

HTML

<h3 id="a">标题内容</h3>
<div id="b">文章内容文章内容文章内容</div> 

我们缩需要的行为事件通过id传递到showhide.js中，通过调用showhide.js来实现，而不是在HTML文档中书写js程序：

showhide.js

function initHideShow(){
var ta = document.getElementById('a');
ta.onclick = hs;
}

function hs(){
var tb = document.getElementById('b');
if (tb.style.display == "none"){
tb.style.display = "block";
} else {
tb.style.display = "none";
} }

window.onload = initHideShow; 

在JS中我们用对象ta的onclick事件来触发显示隐藏的函数(ta.onclick = hs;),通过window.onload来触发整个函数的运行(window.onload = initHideShow;)。