模块化是我们经常听到的一个话题，那什么是模块化呢？从字面意义上我们大概能对它有个初步的判断，那么我今天就根据我自己的想法谈谈css模块化。
背景：起初的css长什么样?
/* index.css */
body {
margin: 0;
padding: 0;
font-size: 18px;
}
.box {
background: #333;
color: #fff;
}
.box .list {
margin-left: 10px;
}
.box .list .item {
border-bottom: 1px solid #ccc;
}
.box .list .item:last-child {
border-bottom: 0;
}
.box .list .item a {
text-decoration: none;
color: #fff;
}
.box .list .item span {
color: red;
}
.box .list .item a ... {
...
}
显然，这里存在几个问题：
1.选择器越来越长，书写累赘（选择器冗长）
2.dom的空间顺序繁杂，不容易分清元素关系（层级结构不清晰）
3.我们很难做到复用，假设另一个页面也需要用到这个box，那么我们必须将box有关的部分粘贴一份，然后去另一个页面复制。（代码难以复用）
这里的问题1，2我们先放一放，看看问题3代码复用怎么解决：
要实现代码复用很简单，我们只需要提供一个公共css库，来存放我们的公共样式以及公共模块即可：
/* common.css */
body {
background: #fff;
color: #333;
font-size: 16px;
}
.box ... {
background: #333;
color: #fff;
...
}
.another-box ... {
...
}
然后只要我们在html页面中引入这个css文件和index就可以了，很完美对么。可是如果你在实际中这样操作过就会发现几个问题：
1.如果项目非常大，那么我们只要是有复用需求的css代码，我们都会往common中放，这样会导致common体积过大。
2.假设有一个页面内容非常少，比如404页面，可能只需要用到少量公共样式，但是为了维护问题，我们还是要引入common，这就显得不够“轻”。
3.由于common越写越大，每个页面的私有css样式的可用的名称就越来越少。
总结上面的问题其实只有两个：冗余，污染。冗余的问题在所难免，重就重些，但也不是燃眉之急。污染的问题确实迫在眉睫，如何用一套规范来组织我们的代码？
首先我们把页面分成三个部分：框架，模块，元件。
框架：
框架是指构成页面的基础结构，它是一个页面的筋骨。我们假设有个页面index.html，它的整体最外围表现为一个class为.g-index的div，然后它由页头（.g-hd）、主体（.g-bd）、页脚（.g-ft）三个部分组成：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>index</title>
</head>
<body>
<div class="g-index">
<div class="g-hd"></div>
<div class="g-bd"></div>
<div class="g-ft"></div>
</div>
</body>
</html>
模块:
模块是页面上数量最多，同时也是最重要的部分，它是代码复用的主体部分，是一个个按照功能划分的区域，如导航栏、轮播图、登录窗口、信息列表等等，模块之间相互独立，分布在页面上，嵌在框架的各个位置上，组成一个丰富多彩的页面。
还是以index.html为例，我们假设页头有个导航栏模块（.m-nav），主体有个新闻列表模块（.m-news），页脚有个版权声明模块（.m-copy_right）
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>index</title>
</head>
<body>
<div class="g-index">
<div class="g-hd">
<div class="m-nav">
nav
</div>
</div>
<div class="g-bd">
<div class="m-news">
news
</div>
</div>
<div class="g-ft">
<div class="m-copy_right">
copy_right
</div>
</div>
</div>
</body>
</html>
元件:
元件是独立的、可重复使用的，并且在某些情况下可以作为模块的组成部分的一种细颗粒。比如一个按钮，一个logo等等。某种意义上说，它其实可以等同于模块，因为它们两者的区别只是规模不同而已。模块更强调一个功能完整的整体，而元件则更强调独立性。
我们假设这个页面还需要在页头放个logo（.u-logo），在导航栏中放置一个登录按钮（.u-login_btn）：
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>index</title>
</head>
<body>
<div class="g-index">
<div class="g-hd">
<img class="u-logo" alt="logo">
<div class="m-nav">
nav
<a href="/logoin" class="u-login_btn">登录</a>
</div>
</div>
<div class="g-bd">
<div class="m-news">
news
</div>
</div>
<div class="g-ft">
<div class="m-copy_right">
copy_right
</div>
</div>
</div>
</body>
</html>
这样子分类的用处是什么呢？第一，让结构更加清晰。第二，我们常说的语义化。第三，一定程度上减轻了命名空间的“负担”。
但是公有模块和私有模块还是有一定程度上的冲突，于是乎我们可以把共有模块的开头都改为cm-news，私有模块用m-news，这样就不会冲突了。但是我们在页面制作中会遇到过这样一个问题：一个模块一开始是私有模块，但是后面的一个页面也用到了这个模块，于是这个模块应该要变成共有模块（还是维护问题）。但是有一个问题，有时候我们在做一个页面的模块时，根本想不起来之前还有页面中有用到一个相同的模块。怎么办？
索性我们可以顶一个这样的规定：如果不是确定是私有模块，一律设置为公有模块。但是这有一定程度上的引起了common样式的重。
回到一开始的两个未解决的问题
1.选择器冗长
2.结构层级不清晰
：如何解决？
: 你听说过LESS/SASS么？