http://youmightnotneedjs.com/ 这个也很好，各种小技巧，仅用HTML、CSS实现

现在的单页应用全部都是模块化，js的模块化。

看你的描述，感觉像是若干个不同的静态页面用同一个被打包的app.js？

这样子的话，我建议写个公共库的js来打包压缩成app.js，然后各个页面，单独写逻辑吧。

也可以考虑一下CSS Modules, webpack里的css-loader有带

第一个问题，main.css 优先于其他的几个被 @import 的样式，这是正常的，也是应该的，相当于 main.css 是入口，其他的样式都是被它关联引入的。题主觉得这种会有问题可能是觉得css也和js一样有那种执行先后的顺序从而影响优先级关系，但实际上，浏览器只会在css全部加载完毕后，将样式去应用到dom树里，这个时候的优先级关系是真实参照css代码的写法及引入顺序的。

第二个问题，这个方式是可用的。本身 @import 的写法只在旧版本的IE（8-）中存在加载速率低下的问题，而现代浏览器已经都有了很好的优化，所以不再需要担心。不过，题主仍然需要注意的是，每一个 @import 都会产生一个新的http请求，从性能优化的角度上说，仍然是像题主说的sass那样，适当减少http请求数，直接把代码合在少量文件内，会比较利于网站更快加载。

这个跟字体的概念一样，可以设置font-size的值来调整

这个是图标字体，跟字体的概念差不多，所以可以用font-size来调整大小，就跟调整普通字体大小一样