[译] 多网站项目的 CSS 架构

• 原文地址：CSS Architecture for Multiple Websites
• 原文做者：Elad Shechter
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Baddyo
• 校对者：xionglong58，lgh757079506

多网站项目的 CSS 架构

CSS 架构 —— 第三部分

复杂的 CSS 架构，可不是你在科班里能学到的东西。

我在互联网行业的第四份工做，是在我国一家领先的媒体新闻公司中任职一名 CSS/HTML 专家，个人主要职责就是开发可重用的、可扩展的、用于多网站的 CSS 架构。

在本文中，我将与你们分享我在构建多网站架构领域中积累的知识和经验。

附注：现在，正规的项目都会用到 CSS 预处理器。而在本文中，我会使用 Sass 预处理器。

本文是我写的讨论 CSS 架构的系列文章中的第三篇。建议你们最好先读读此系列的第二篇 —— 《CSS 架构：文件夹和文件结构》，有助于加深对本文的理解。

用层构建世界

在开始开发一个大型项目以前，咱们应该放眼全局，把多个网站的共同之处提炼出来。高楼大厦始于一砖一瓦，而项目的基石就是样式规格化、混入（Mixins）、通用图标以及局部模块层（元素、组件、图形逻辑、实体、页面……不一而足）等。

为了使多重项目（即多个网站）正常运转，咱们必须决定哪些样式是通用样式、哪些是专有样式 —— 通用样式写进基础层，而专有样式写在与其对应的层中。这是一条充满摸索和碰壁的实践之路。每当思考的角度发生变化，咱们都须要逐层地挪动样式代码，直到咱们以为顺眼为止，这都是屡见不鲜了。

理解了这项原则后，咱们就能够开始着手构建做为基础的全局层了。这个全局层是整个多重项目（多个网站）的起始点。

下面的示例图向咱们演示了彼时我司的项目需求。

基础层要保持轻量，其中只包含 CSS 初始化、基本的 SASS mixins、通用图标、通用字体（如需）以及功能类，若是某些网格布局适用于全部网站，就将其做为通用网格添加到基础层中。在 _partials.scss 层（元素、组件等）中，咱们主要用到的是 _elements.scss 层，该层中包含诸如通用弹窗、通用表单和通用标题等此类局部模块。咱们应该在基础样式中添加的是全部（或者大多数）底层样式共有的部分。（更多关于文件夹和文件结构的细节，参见个人上一篇文章）

如何组织多个层

在咱们的架构中，每一个层都至少包含三个文件：两个私有文件（局部样式文件和配置文件，称之为私有是由于它们不会被编译成一个 CSS 文件）和一个公共文件（本层的主文件）。每层的配置文件 _config.scss 一般包含变量。_local.scss 文件则包含内容样式，为当前层充当控制器或者包管理器的角色。而第三个文件（layer-name.scss）会调用前两者。

layer-name.scss 文件：

@import "config";
@import "local";
复制代码

另一个咱们要给本身定下的原则就是，尽量把每一个文件都拆分红尽量小的部分（小文件）。这个原则会让重构很是方便。

在每一层中，都要保证只编译 layer-name.scss 文件，即便某些层表明的是一个“虚拟项目”（如上面示例图中的“基础层框架”）。

对于不会被编译成单独文件的私有文件，咱们用一个下划线（_）做为其文件名的前缀。这里的下划线表明着此文件不能单独存在。

**注意：**当导入私有文件时，咱们书写其文件名时能够没必要带上前缀下划线。

层架构示例：

文件夹结构长这样：

sass/ 
 |
 |- base-layer/
     |- config/     
     |- local/
     |- _config.scss
     |- _local.scss
     |- base-layer.css  (编译后的层样式)
     |- base-layer.scss
复制代码

继承

假设咱们想要从基础层开始建立一个项目。咱们须要根据 base-layer 文件夹的内部结构，用新项目的名称照猫画虎地克隆一套出来。在后续例子中，咱们把这个新项目称为 inherited-project。

提示：把全部的层目录和项目目录都放在 Sass 的根目录中。

该项目至少包含一个 _config.scss 文件、一个 _local.scss 文件和此层的核心 Sass 文件 —— 在本例中即为 inherited-project.scss。

全部的层和项目都位于 Sass 的根目录中。

sass/ 
 |
 |- base-layer
 |   |- config/     
 |   |- local/
 |   |- _config.scss
 |   |- _local.scss
 |   |- base-layer.css  (编译后的层样式)
 |   |- base-layer.scss 
 |
 |- inherited-project
     |- config/     
     |- local/
     |- _config.scss
     |- _local.scss
     |- inherited-project.css  (编译后的层样式)
     |- inherited-project.scss
复制代码

项目 inherited-project 的配置文件引入了 base-layer 中的配置文件。这样一来，咱们就能增长新变量或者覆写上层（base-layer）中的已有变量了。

如下为 inherited-project/_config.scss 的一个例子：

/*加载 base-layer 配置信息 */
@import "../base-layer/config.scss";

/** 局部的 Config 层 (按需添加或覆写变量)**/
@import "config/directions.scss";
复制代码

内容样式文件 inherited-project/_local.scss 亦同理：

/* 导入 base-layer 局部组件  */
@import "../base-layer/local.scss";

/* 局部字体 */
@import "local/font-almoni.scss";

/* 局部组件 */
@import "local/elements.scss";
@import "local/components.scss";
复制代码

若是要建立的新层既有通用样式又有独特样式，那么从 base-layer 文件夹继承基础层样式再合适不过了。

这一层会建立一个名为 inherited-project.css 的 CSS 文件。

在内部层中覆写变量

使用“层”的方式覆写变量很是简单。

比方说在基础层中有一个名为 $base-color 的变量，其值为 blue（$base-color: blue;）。要想覆写此变量，就须要在局部文件 _config.scss 中更新它的值。如今，全部使用该变量的组件 —— 不管是继承于基础层仍是定义于局部层 —— 都会更新对应变量的的颜色值。

Global Story 全局

某些模块并不是在全部层中都会用到，所以若是你在基础层中定义它们，其余项目就会导入冗余代码。为了解决这个问题，我走了另外一条路线，采用了全局模块的概念。

这个概念是说，把仅用于某些层的模块放置于一个新的根目录（_partials）中，这个新的根目录位于全部层以外。而后，任何层均可以从全局目录 _partials 中导入所需模块。

下图展现了将模块分离的例子：

每一层均可以按需从全局目录 _partials 中调用一个或多个模块。

全局目录 _partials 示例：

sass/ 
 |
 |- _partials/ 
 |- base-layer/ 
 |- inherited-project/
复制代码

从 _partials 导入模块的 local.scss 文件：

/* 导入 base-layer 中的局部组件 */
@import "../base-layer/local.scss";

/* 局部组件 */
@import "local/partials.scss";

/* 添加全局模块 */
@import "../_partials/last-connection";
复制代码

些许额外忠告

• 组织结构要有条理。要一直记得以知足需求的方式规划项目、保持最佳结构。
• 别重蹈覆辙。仅用 @import 便可轻松导入另外一层的组件。好比说，某些组件定义在一个“体育”项目中，而这些组件与另外一个项目中的“新闻”网站有关联。那咱们就能够直接把这些组件 @import 进“新闻”网站中。（网站 = 层 = 项目）
• 充分利用 IDE 快捷方式。选用一款便于重构的编辑器，免于致使报错或故障。
• 立新不可破旧。在开发和后续重构中，每次都要把全部 Sass 根文件一同编译，以避免新旧脱节。

总结

在本文中，我向你们展现了针对多网站项目的 CSS 体系结构的构建方法，这套思想提炼于我经年积累的知识和经验。

本文是系列文章 CSS 架构文章新篇的第三篇，我会每隔几周跟你们分享后续篇章。

若是以为本文有趣，欢迎在 twitter 上或者 medium 上关注我。

个人 CSS 架构系列文章：

1. 规格化 CSS 仍是 CSS 重置？！
2. CSS 架构 —— 文件夹和文件架构
3. 多网站项目的 CSS 架构

结束语

好了，此次就分享到这里。 衷心但愿你们喜欢本文，并能从个人经验中获益一二。 若是你喜欢本文，请点赞并和你们分享你的心得，我将不胜感激。:-)

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。