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