多网站项目的 CSS 架构

6 篇文章 0 订阅
5 篇文章 0 订阅

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

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

image

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

附注:如今,正规的项目都会用到 CSS 预处理器。而在本文中,我会使用 Sass 预处理器。

用层构建世界

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

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

理解了这项原则后,我们就可以开始着手构建作为基础的全局层了。这个全局层是整个多重项目(多个网站)的起始点。

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

image

基础层要保持轻量,其中只包含 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 文件,即使某些层代表的是一个“虚拟项目”(如上面示例图中的“基础层框架”)。

对于不会被编译成单独文件的私有文件,我们用一个下划线(_)作为其文件名的前缀。这里的下划线代表着此文件不能单独存在。

**注意:**当导入私有文件时,我们书写其文件名时可以不必带上前缀下划线。

层架构示例:

image

文件夹结构长这样:

```
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 文件。

在内部层中覆写变量

使用“层”的方式覆写变量非常简单。

比方说在基础层中有一个名为  b a s e − c o l o r ∗ ∗   的 变 量 , 其 值 为 b l u e ( ∗ ∗ base-color** 的变量,其值为 blue(** basecolor bluebase-color: blue;)。要想覆写此变量,就需要在局部文件 _config.scss 中更新它的值。现在,所有使用该变量的组件 —— 不论是继承于基础层还是定义于局部层 —— 都会更新对应变量的的颜色值。

Global Story 全局

某些模块并非在所有层中都会用到,因此如果你在基础层中定义它们,其他项目就会导入冗余代码。为了解决这个问题,我走了另一条路线,采用了全局模块的概念。

这个概念是说,把仅用于某些层的模块放置于一个新的根目录(_partials)中,这个新的根目录位于所有层之外。然后,任何层都可以从全局目录 _partials 中导入所需模块。

下图展示了将模块分离的例子:

image

每一层都可以按需从全局目录 _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 体系结构的构建方法,这套思想提炼于我经年积累的知识和经验。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 基于 AJAX 的多层架构开发项目,需要考虑以下几个方面: 1.前端技术 前端技术包括 HTML、CSS、JavaScript 等,其中 JavaScript 是 AJAX 技术的核心。可以使用 jQuery、Vue.js、React 等前端框架来简化开发。 2.后端技术 后端技术可以选择 PHP、Java、Python 等语言,使用框架例如 SpringMVC、Django、Flask 等来实现数据的处理和存储。 3.AJAX 技术 AJAX 技术可以通过 XMLHttpRequest 对象来实现。通过 AJAX 可以异步地请求后端数据,并将数据插入到前端页面中,从而实现无刷新的页面交互效果。 4.多层架构 多层架构包括表现层、业务逻辑层和数据访问层。表现层负责前端页面的展示和交互,业务逻辑层负责业务逻辑的处理,数据访问层负责数据的存储和访问。 在多层架构中,前端页面通过 AJAX 技术向业务逻辑层发起请求,业务逻辑层处理请求并访问数据访问层,最终将处理结果返回给前端页面。 综上所述,基于 AJAX 的多层架构开发项目需要掌握前端技术、后端技术、AJAX 技术和多层架构的相关知识。 ### 回答2: 基于Ajax的多层架构开发项目是一种基于Web的应用程序开发模式。它将应用程序的不同层次分离开来,包括展示层、业务逻辑层和数据访问层,并通过Ajax(Asynchronous JavaScript and XML)技术实现前后端之间的数据交互和异步通信。 该多层架构开发项目具有以下特点: 1. 分离前后端:通过Ajax技术,前端页面与后端服务器之间的数据交互可以实现无需刷新页面的异步通信,提高用户体验。前端使用JavaScript异步请求数据并将结果动态更新到页面上,后端则负责处理请求并返回所需数据。 2. 提高响应速度:由于Ajax的异步特性,前端可以同时发送多个请求,从而减少页面加载时间和数据传输时间。用户能够迅速地获取数据,同时可以在等待数据的同时进行其他操作。 3. 可重用性和可维护性:将应用程序的不同层次分离开来,使得各个层次的代码更清晰、更易于维护。开发人员可以专注于各自层次的开发,降低代码耦合度,提高代码重用性。 4. 安全性增强:通过Ajax技术,可以减少对敏感数据的暴露,因为只有在用户请求数据时才会传输相关数据,提高了应用程序的安全性。 5. 提供更好的用户体验:通过无需刷新页面的数据更新,用户能够更快地获取所需信息,并能够在页面上进行实时交互,提高了用户的满意度和使用体验。 总之,基于Ajax的多层架构开发项目能够提供更好的用户体验、提高响应速度、增强应用程序的安全性,并且具有良好的代码结构和可维护性,是一种值得推荐的开发模式。 ### 回答3: 基于Ajax的多层架构开发项目是一种用于构建Web应用程序的技术方案。它将应用程序的不同部分划分为多个层次,每个层次负责不同的功能和任务,通过Ajax技术进行交互和通信。 这种架构一般由以下几层组成: 1. 表示层:负责将用户界面展示给用户,并接收用户的交互请求。通常使用HTML、CSS和JavaScript编写,可以实现动态内容的呈现和用户界面的交互。 2. 业务逻辑层:负责处理用户请求并进行业务处理。它包含了应用程序的核心逻辑,处理用户的操作和请求,并与数据访问层进行交互。这一层通常使用服务器端的脚本语言(如PHP、Python或Java)来实现。 3. 数据访问层:负责与数据库进行数据的读取、写入和更新操作。通过与数据库进行交互,将数据传递给业务逻辑层进行处理,并将处理结果返回给表示层。在这一层,可以使用SQL语言编写数据库操作语句。 4. 数据库层:负责存储应用程序的数据。可以使用关系型数据库(如MySQL、Oracle)或非关系型数据库(如MongoDB)来存储数据。 通过Ajax技术,这些不同层次的组件可以实现快速、无刷新的数据交互。在用户与应用程序进行交互时,表示层可以通过Ajax技术发送异步请求到业务逻辑层,业务逻辑层再与数据访问层进行交互,最后将结果返回给表示层用于页面的更新。 基于Ajax的多层架构开发项目具有以下优势: 1. 增强用户体验:通过Ajax技术,实现了快速响应和无刷新的数据更新,提高了用户与应用程序的交互体验。 2. 解耦合性:通过将应用程序的不同部分划分为多个层次,实现了各组件之间的解耦合,方便维护和扩展。 3. 可重用性:每个层次只负责特定的功能和任务,可以实现组件的重用,提高开发效率。 4. 安全性:通过合理的权限控制和加密机制,保障了数据的安全性。 综上所述,基于Ajax的多层架构开发项目可以提升Web应用程序的性能、可维护性和用户体验,并提供了一种灵活可扩展的架构设计。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值