构建工具
使用构建工具进行开发，最终通过构建工具打包编译出最终的前端代码是现在的大趋势，但是构建工具生产出来的大都是前后端分离的代码。如果对seo有要求，通过构建工具就不符合需求了（不考虑SSR，毕竟它局限于Node）；
在PHP的世界里还是有很多不分离的场景的（例如wordpress）。
对于html可以通过PHP自身的特性去拆分，对于JS 已经有了很多成熟的模块化方案。
那么对于css呢？
CSS模块化
这里的模块化只考虑拆分，不考虑实现局部作用范围。
1. 传统写法
如果不模块化的话，我们往往是这么写：
代码语言：javascript复制....
css变量...；
pc端css...；
手机端css..；
....从头到尾写完，最终网页上只需要引入一个文件；随之而来的问题就是：css越写越多，维护起来越来越麻烦，找个css都得找好一阵；
然后可能就考虑拆分成多个文件，分开引入（不考虑css自带的动态引入）；最后发现维护确实简单了，但是引入文件数量多了，总会觉得不简洁。
那么有没有维护起来方便，最终只需要引入一个文件的方案呢？有！
2. scss预处理
scss的相关说明看这里：https://cloud.tencent.com/developer/article/2218772
使用scss之后就变成了这样：
代码语言：javascript复制@import "assets/extra/normal.scss";
@import "assets/extra/w-1024-1580.scss";
@import "assets/extra/w-1024.scss";
@import "assets/extra/w-768-1024.scss";
@import "assets/extra/w-480-767.scss";@import
代码语言：txt复制 类似PHP的include，导入一个外部文件 经过scss编译之后得到一个完整的css文件，而我们只需要维护多个拆分后的scss文件；同时还能使用scss的一些特性，让css写起来更加流程和方便；
