什么是模块化？
1.一系列相关联的结构组成的整体
2.这个整体带有一定语义化
比如说page分页、比如说图片轮播。
怎么做？
1.为模块分类命名如(m-,md-)表示一个模块
2.唯一的根节点
3.使用以主选择器开头的后代选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*导航模块*/
.m-nav{}/*模块容器*/
.m-nav li{}
.m-nav a{}
.m-nav .active a{}
</style>
</head>
<body>
<div class="m-nav">
<ul>
<li class="active"><a href="#">linnk1</a></li>
<li><a href="#">link2</a></li>
</ul>
</div>
</body>
</html>
比如说导航上面又添加一个按钮，之前的样式保留，所以我只需要添加一个样式，通过添加的样式来控制按钮
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*导航模块*/
.m-nav{}/*模块容器*/
.m-nav li{}
.m-nav a{}
.m-nav .active a{}
</style>
</head>
<body>
<div class="m-nav m-nav-1">
<ul>
<li class="active"><a href="#">linnk1</a></li>
<li><a href="#">link2</a></li>
</ul>
<a href="btn">login</a>
</div>
</body>
</html>
模块化的优点：
利于多人协同开发
便于扩展和重用
可读性、可维护性好
不会引起样式污染
