关于css/sass文件的组织,每个人都有自己的方法,我觉得划分清晰,方便查找即可,没有一个一成不变的模式。但是大体的规律还是能总结出来的。 文件的组织要考虑一下几点:
- 分开项目自己的代码和第三方的代码
- 分开会编译成css的代码和基本变量函数代码
- 分开整体布局的代码和各个元素的代码
- 分开各个页面/控件的代码
我觉得要区分两种项目来谈,一种是框架,另一种是App。两者有共同的地方,也会有区别。
对于框架来说,所有的CSS和JavaScript代码应该都是基于原生的,不应该再引入第三方的dependency(复制粘贴的不算)。 框架大体上要有如下功能:
- 布局
- 风格(包括颜色库,字体,html元素的样式, 主题等)
- 控件
我觉得可以分为如下部分:
- base: 所有不产出css的部分,包括variables,mixins,utilities等
- layouts: 整体布局,比如grid系统, form的布局, flex布局的重写,原生元素布局的覆盖等
- components: 自定义控件的css文件
对于一个应用来说,主要就是布局,页面和自定义的控件了。我觉得可以分为如下的文件夹:
- base: 项目内部的通用样式和变量
- partials: 定义页面各个部分的样式,比如 header, footer, sidebar等
- components: 项目内部自定义的控件
- pages: 包含各个页面独有的代码
- vendors: 用来引入第三方的scss文件'