/sass-project-structures

Sass project structure best practices

Primary LanguageCSS

Sass Project Structure Best Practices

关于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文件'