在web前端领域，模块化和语义化是作为同一个技术规范而提出的，在此我们将它们两地分居，是考究于有必要先将前端设计中的一些细节问题讲清楚来便于过渡缓冲为大家全面分析这一块。
什么是模块化? 先看百科的解释。
模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。
回到我们的web前端开发，模块化的概念也是相对比较广泛的，随着近些年来的web前端巨大的变革，重构中所涉及到的语义化和模块化都是时下前端人员所密切关注也是正努力在做的工作，大家虽然各持己见对模块化做了不同的解释，可是中心思想都突出在一点，那就是模块化可以提高代码重用率、促进发效率、减少沟通成本。
模块化的作用究竟表现在哪里？
一个web方案拿出来后，用户最关注的莫过于他能提供什么便利了，而对于boss 来说，他是否能带来直接或者间接的经济效益了。
?提高代码重用率
?提高开发效率、减少沟通成本
?降低耦合,解决代码与代码，模块与模块之间的灵活性
?有效降低发布风险
?减少Bug定位时间和Fix成本
?提高页面容错能力
?更容易实现快速迭代
?更好的支持低频发布（即打补丁升级不能全面换血，而是应该从某个功能块开始慢慢升级，来调度用户的改观和操作性）
通用盒子模型:
.box{ overflow:hidden; }
.box .hd{}
.box .hd .more{ float:right; margin-right:10px; color:#999; font-weight:normal;
font-size:12px; }
.box .hd h3{ font-weight:bold; padding-left:12px; font-size:14px; color:#134699; } .box .hd h3 a{ color:#134699; }
.box .bd{ padding:8px; }
.bd .date { float:right; color:#999; }
敏捷开发的过程中，程序员所关心的是ul的结构，然后镶嵌行为代码来达成数据的提取或交换，当前端规范并模块化一个模板后，程序员将不用关心样式问题，而只需要尽可能遵守w3c规范的条件下来写标签和程式即可。这也将是未来软件开发、平台开发的一个趋势。
模块化之后会在部分模块区域中不需要的暂时不需要的部分，譬如有些模块需要标题，有的模块为了凸显个性用图片来占据整个区域，所以这时就要靠css来控制他们的显示隐藏等问题了。如果是要隐藏某个元素的话，使用display：none 就好了，对于要用图片替代文字来彰显观赏性和互动性的可以使用
font-size:0;overflow:hidden来缩小字体即可，当然text-indent:9999px也
可以，但是偏移那么大一个数字之后在浏览器性能解析上面可能会有些瑕疵存在。
宝来网按照从业经验，整理的web前端规范文档，转载请声明：宝来网
.