在实际开发中，我们大多采用先定义功能再选配功能，而不是先写内容再写功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.demo1{
height: 100px;
width: 100px;
background-color: red;
}
.demo2{
height: 200px;
width: 200px;
background-color: green;
}
.demo3{
height: 300px;
width: 300px;
background-color: gray;
}
.demo4{
height: 400px;
width: 400px;
background-color: black;
}
.demo5{
height: 500px;
width: 500px;
background-color: rosybrown;
}
</style>
<title></title>
</head>
<body>
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
</body>
</html>
就不是像上面那样，先写html，再写css，而是像下面那样为html选配功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
.green{
background-color: green;
}
.gray{
background-color: gray;
}
.size100{
width: 100px;
height: 100px;
}
.size200{
width: 200px;
height: 200px;
}
</style>
<title></title>
</head>
<body>
<div class="green size100"></div>
<div class="green size200"></div>
<div class="gray size100"></div>
<div class="gray size200"></div>
</body>
</html>
这是一种新的编程方法。