不使用构建工具,如何对css进行模块化?
- CSS笔记
- 2022-08-20
- 1224热度
- 0评论
构建工具
使用构建工具进行开发,最终通过构建工具打包编译出最终的前端代码是现在的大趋势,但是构建工具生产出来的大都是前后端分离的代码。如果对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写起来更加流程和方便;