首页 > 代码库 > 浅谈css模块化
浅谈css模块化
模块化是我们经常听到的一个话题，那什么是模块化呢？从字面意义上我们大概能对它有个初步的判断，那么我今天就根据我自己的想法谈谈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="http://www.mamicode.com/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么？
浅谈css模块化