CSS架构
在一个大型项目中，由于页面过多，导致CSS代码难以维护和开发。所以CSS架构可以帮助我们解决文件管理与文件划分问题。
首先要对CSS进行模块化处理，一个模块负责一类操作行为。可以利用Sass或Less来实现。
| 文件夹 | 含义 |
| base | 一些初始的通用CSS，如重置默认样式，动画，工具，打印等 |
| components | 用于构建页面的所有组件，如按钮，表单，表格，弹窗等 |
| layout | 用于布局页面的不同部分，如页眉，页脚，弹性布局，网格布局等 |
| pages | 放置页面之间不同的样式，如首页特殊样式，列表页特殊样式等 |
| themes | 应用不同的主题样式时，如管理员，买家，卖家等 |
| abstracts | 放置一些如：变量，函数，响应式等辅助开发的部分 |
| vendors | 放置一些第三方独立的CSS文件，如bootstrap，iconfront等 |
文件结构思维导图
main.scss 作为总的入口文件，引用所有的模块文件
@import "abstracts/variables";
@import "abstracts/function";
@import "abstracts/media";
@import "base/reset";
@import "base/typography";
@import "base/animate";
@import "base/utilites";
@import "components/alert";
@import "components/button";
@import "components/form";
@import "components/table";
@import "layout/flex";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "pages/index";
@import "pages/list";
@import "pages/detail";
@import "pages/goods";
@import "themes/admin";
@import "themes/buyer";
@import "themes/seller";
@import "themes/tourist";注意：sass文件引入的时候，我们的文件名都是下划线开头的，但是引入的时候都没有下划线，这是因为引入文件的时候是可以省略文件名的下划线的，这是个小特性，需要注意一下！另外，文件的后缀也是可以省略的。
来源：oschina
链接：https://my.oschina.net/mj20200214/blog/3197012