构建工具 使用构建工具进行开发，最终通过构建工具打包编译出最终的前端代码是现在的大趋势，但是构建工具生产出来的大都是前后端分离的代码。如果对seo有要求，通过构建工具就不符合需求了（不考虑SSR，毕竟它局限于Node）；
在PHP的世界里还是有很多不分离的场景的（例如wordpress）。
对于html可以通过PHP自身的特性去拆分，对于JS 已经有了很多成熟的模块化方案。
那么对于css呢？
CSS模块化 这里的模块化只考虑拆分，不考虑实现局部作用范围。
- 传统写法 如果不模块化的话，我们往往是这么写：
…. css变量…； pc端css…； 手机端css..； ….
从头到尾写完，最终网页上只需要引入一个文件；随之而来的问题就是：css越写越多，维护起来越来越麻烦，找个css都得找好一阵；
然后可能就考虑拆分成多个文件，分开引入（不考虑css自带的动态引入）；最后发现维护确实简单了，但是引入文件数量多了，总会觉得不简洁。
那么有没有维护起来方便，最终只需要引入一个文件的方案呢？有！
- 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”;
经过scss编译之后得到一个完整的css文件，而我们只需要维护多个拆分后的scss文件；同时还能使用scss的一些特性，让css写起来更加流程和方便；
阅读剩余 0%
本站所有文章资讯、展示的图片素材等内容均为注册用户上传(部分报媒/平媒内容转载自网络合作媒体)，仅供学习参考。
用户通过本站上传、发布的任何内容的知识产权归属用户或原始著作权人所有。如有侵犯您的版权，请联系我们反馈本站将在三个工作日内改正。
