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文件引入的时候,我们的文件名都是下划线开头的,但是引入的时候都没有下划线,这是因为引入文件的时候是可以省略文件名的下划线的,这是个小特性,需要注意一下!另外,文件的后缀也是可以省略的。