不使用构建工具，如何对css进行模块化？

构建工具

使用构建工具进行开发，最终通过构建工具打包编译出最终的前端代码是现在的大趋势，但是构建工具生产出来的大都是前后端分离的代码。如果对seo有要求，通过构建工具就不符合需求了（不考虑SSR，毕竟它局限于Node）；

在PHP的世界里还是有很多不分离的场景的（例如wordpress）。

对于html可以通过PHP自身的特性去拆分，对于JS 已经有了很多成熟的模块化方案。

那么对于css呢？

CSS模块化

这里的模块化只考虑拆分，不考虑实现局部作用范围。

1. 传统写法

如果不模块化的话，我们往往是这么写：

....
css变量...；
pc端css...；
手机端css..；
....

从头到尾写完，最终网页上只需要引入一个文件；随之而来的问题就是：css越写越多，维护起来越来越麻烦，找个css都得找好一阵；

然后可能就考虑拆分成多个文件，分开引入（不考虑css自带的动态引入）；最后发现维护确实简单了，但是引入文件数量多了，总会觉得不简洁。

那么有没有维护起来方便，最终只需要引入一个文件的方案呢？有！

2. scss预处理

scss的相关说明看这里：https://cloud.tencent.com/developer/article/2218772

使用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写起来更加流程和方便；