复杂的CSS架构,可不是你在科班里能学到的东西。
我在互联网行业的第四份工作,是在我国一家领先的媒体新闻公司中任职一名CSS/HTML专家,我的主要职责就是开发可重用的,可扩展的,用于多网站的CSS架构。
在本文中,我将与大家分享我在构建多网站架构领域中积累的知识和经验。
附注:如今,正规的项目都会用到CSS预处理器。而在本文中,我会使用Sass预处理器。
用层构建世界
在开始开发一个大型项目之前,我们应该放眼全局,把多个网站的共同之处提炼出来。高楼大厦始于一砖一瓦,而项目的基石就是样式规格化,混入(混合),通用图标以及局部模块层(元素,组件,图形逻辑,实体,页面……不一而足)等。
为了使多重项目(即多个网站)正常运转,我们必须决定哪些样式是通用样式,哪些是专有样式——通用样式写进基础层,而专有样式写在与其对应的层中。这是一条充满摸索和碰壁的实践之路。每当思考的角度发生变化,我们都需要逐层地挪动样式代码,直到我们觉得顺眼为止,这都是家常便饭了。
理解了这项原则后,我们就可以开始着手构建作为基础的全局层了。这个全局层是整个多重项目(多个网站)的起始点。
下面的示例图向我们演示了彼时我司的项目需求。
基础层要保持轻量,其中只包含CSS初始化,基本的SASS mixin,通用图标,通用字体(如需)以及功能类,如果某些网格布局适用于所有网站,就将其作为通用网格添加到基础层中。在_partials。scss层(元素,组件等)中,我们主要用到的是_elements。scss层,该层中包含诸如通用弹窗,通用表单和通用标题等此类局部模块。我们应该在基础样式中添加的是所有(或者大多数)底层样式共有的部分。(更多关于文件夹和文件结构的细节,参见我的上一篇文章)
如何组织多个层
在我们的架构中,每个层都至少包含三个文件:两个私有文件(局部样式文件和配置文件,称之为私有是因为它们不会被编译成一个CSS文件)和一个公共文件(本层的主文件)。每层的配置文件_config。scss通常包含变量._local。scss文件则包含内容样式,为当前层充当控制器或者包管理器的角色。而第三个文件(layer-name.scss)会调用前二者。
图层名称。scss文件:
@ import“config"
@ import“local"
另外一个我们要给自己定下的原则就是,尽可能把每个文件都拆分成尽可能小的部分(小文件)。这个原则会让重构非常方便。
在每一层中,都要保证只编译图层名称。scss文件,即使某些层代表的是一个“虚拟项目”(如上面示例图中的“基础层框架”)。
对于不会被编译成单独文件的私有文件,我们用一个下划线(_)作为其文件名的前缀。这里的下划线代表着此文件不能单独存在。
<强>注意:当导入私有文件时,我们书写其文件名时可以不必带上前缀下划线。
层架构示例:
文件夹结构长这样:
sass/
|
| -基极层/
| - config/
| -本地/
| - _config。scss
| - _local。scss
| -基础层。css(编译后的层样式)
| - base-layer.scss
继承
假设我们想要从基础层开始创建一个项目。我们需要根据基础层文件夹的内部结构,用新项目的名称照猫画虎地克隆一套出来。在后续例子中,我们把这个新项目称为inherited-project。
提示:把所有的层目录和项目目录都放在Sass的根目录中。
该项目至少包含一个_config。scss文件,一个_local。scss文件和此层的核心Sass文件——在本例中即为inherited-project.scss。
所有的层和项目都位于Sass的根目录中。
sass/——基础层
- config/
-本地/
——_config.scss
——_local.scss
——基础层。css(编译后的层样式)
——base-layer.scss ——inherited-project - config/-本地/猒config.scss ——_local.scss ——inherited-project。css(编译后的层样式) ——inherited-project.scss
项目inherited-project的配置文件引入了基础层中的配置文件。这样一来,我们就能增加新变量或者覆写上层(基础层)中的已有变量了。
