如何组织前端开发中的css以及js代码，相信在开发的过程中是一个比较让人头疼的问题。
我们的目标是：
1. 让代码拥有较好的可维护性，提高代码的重复利用率。
2. 尽可能少的减少引入的css以及js的文件数量，因为过多的http请求会一定程度影响页面加载的效率。
3. 尽量少的引入与页面无关的代码，即减少代码冗余。
但要同时满足以上三个条件不容易，在后续的优化中，我们只能尽可能的平衡这种关系。
说到底就是如何处理代码的可维护性以及代码的性能，但不管怎么样，代码的可维护性应该是我们更应该重视的。现在的计算机都比较快，未来还会更快，在保证拥有较好的用户体验下，我们尽可能的提高我们的代码质量，这样就够了。
目前的开发中，我们用requireJs来实现模块化开发，一个大模块就是一个js文件，大模块中还有小模块，模块与模块之间通过接口互相调用，模块之间拥有较低的耦合度可以方便我们对代码的管理，提高代码利用率。
对模块的加载方式也是我们应该考虑的问题之一，这里参考AMD和CMD的规范。简单的说就是加载模块时采用预加载还是延时加载。具体问题具体分析，不同场景使用不同的方式。requireJs一开始是基于AMD的规范开发出来的，现版本的requireJs同样支持CMD的使用模式。
接着说说怎么组织css代码。
css文件大概分为三大类：
1. 全局通用模块
2. 局部通用模块
3. 私有模块
一、全局通用样式：这类css每个页面都会引用，需要在页面头部引用，前期开发可分成多个文件方便管理，后期生产环境可压缩合并成一个文件（common.css）。
1. 重置样式（reset.css），这类样式主要是统一各大浏览器的默认样式。
2. 图标样式（icon.css），使用css sprites管理的图标样式。
3. 自定义通用样式（custom.css），自定义一些页面常用样式以及对常用插件样式的重写，比如：
1 /* 清除浮动 */ 2 .clear-fixed:after { 3 content: ''; 4 display: block; 5 clear: both; 6 } 7 /* 文字超过部分变成... */ 8 .nowrap { 9 overflow: hidden; 10 white-space: nowrap; 11 text-overflow: ellipsis; 12 } 13 /* 页面导航栏 */ 14 .nav { 15 overflow: hidden; 16 white-space: nowrap; 17 text-overflow: ellipsis; 18 } 19 /* 重置弹框插件的默认样式 */ 20 .dialog { 21 border: 0; 22 box-shadow: 1px 2px 5px #ccc; 23 }
二、局部通用样式：这类样式仅在部分页面引用，一般根据某些特征来为他们划分，比如：
1. 表单样式（form.css），常出现在编辑页面
2. 插件样式（dialog.css），这类样式一般不会去修改它，但是可以重写覆盖样式。
假如一个页面涉及的模块较多，这类样式的文件数量可能很多，但还是有优化的空间。建议对不同样式遵循以下规则：一开始加载便影响到页面外观的样式，建议css文件头部引入。而对于其他可延迟类样式（如弹窗插件的样式），可对其延迟加载，一般是跟随插件异步的引入时引入（依赖引入）。
三、私有样式：这类样式往往只有一个页面有，很奇葩，而且代码量不会很多，往往连1K都不到，如果把这些样式单独写进一个css文件显得有点浪费，对于这类样式，可以几个页面的样式写在一起。