CSS模块化设计

自己有一套模块化的思路，想搜索一下有没有共鸣结果排名靠前的是通过class拼凑页面的想法。模块化是twinsen提出来的，从我接收第一个portal类网站开始就认可他这种思路，不过到现在也没太推广开去，其实就是CSS写法的东东。

什么是模块化CSS，举个例子就是人，都有脑袋，眼睛，鼻子手脚等器官，但是别人的器官坏了，并不影响你的正常使用，因为人和人是彼此独立的，彼此独立就不会相互影响，在版本迭代，多人协同开发上优势就更为明显。
具体应用就是
<模块1>
<子元素1></子元素1>
<子元素2></子元素2>
</模块1>
<模块2>
<子元素1></子元素1>
<子元素2></子元素2>
</模块2>

CSS方面用后台选择符的形式组织
模块1 {}
模块1 子元素1 {}
模块1 子元素2 {}
模块2 {}
模块2 子元素1 {}
模块2 子元素2 {}

这样就保证了模块1 的作用域只限于模块1而影响不到模块2，模块1不管变更多少次，不管被谁修改，模块2依然完好无损。体现在研发流程上就是模块1的需求不断变化，CSS不断重写，写模块1的人不在了，别人要可以放心的处理模块1，而不用担心影响这个网站的视觉表现。当然浮动布局和上下布局是做不到不影响的，但是耦合性还是小了很多，仔细看csszengarden的代码也能发现是这个思想。

相互独立的模块组成的网页，CSS拓展性方面也增强了很多，因为模块间嵌套少了，可以更加随意的摆放。

模块化拓展思路就是CSS作用域控制，一般CSS可以划分全局样式和局部页面样式，全局样式又分为全局模块，和全局样式初始化（reset，基本的类等）。css文件上可以分为全局css和局部页面css，全局css里再分全局模块样式和全局初始化样式。如：
g.css
-reset
-link
-form
-全局模块
--header
--footer
--提示框
--分页
index.css
首页的css
detail.css
新闻详细页面css
-模块1
-模块2
......

这样整个网站的样式作用域区分就很明晰了，样式定位修改迭代也方面很多，管理起来也省事许多，首页改版就新建一个index_v2，模块修改就修改为模块1_v2，需要别人协助，就注释写清楚谁谁修改该模块的什么什么特性。要多人同时维护就划分清楚你负责哪些模块，他负责哪些模块。初始化样式最好压缩成一行，一次搞定尽量避免修改。

对比class多重拼凑的页面容易接手和维护的多，不至于样式优先级乱到不停的抢优先级，和复杂到一丁点的class修改都心惊胆战。

大体上就说明模块化CSS设计的思路和好处了。但是这样有个缺陷就是表现上看似复用的不敢复用，因为会增加耦合性，后台选择符很冗长，太浪费字节。

当然这些都是随环境不同权衡选择，如果你的网站多年来就你自己一个人折腾，没有资源会帮助你，或者你的设计稿很规范，确定了一个网站基本控件表现不会变动，那就大胆的复用，甚至建立一个个组件去拼凑网站页面。