一、摘要：澄清“架构风格分类”领域的概念混淆

✅ 真正的架构风格分类体系：仅 Shaw & Garlan 五类架构风格类别框架
❌ 常被误称为“分类体系”的五类非分类体系：POSA 架构模式系统、SEI/Bass 质量属性驱动设计方法、ISO/IEC/IEEE 42010 架构描述元标准、Kruchten 4+1 架构描述模型、CNCF技术实践景观

• ISO/IEC/IEEE 42010:2011 — 国际标准框架定位（取代IEEE 1471-2000）

  在《Systems and software engineering — Architecture description》中：
  "Architecture descriptions may include design patterns, which are reusable solutions to common problems in software design." (Clause 4.2.2.3)
  关键澄清：

  • 全文无"architectural pattern"定义（Clause 3 Definitions）
  • 仅提及"design patterns"，强调架构描述需包含"问题-解决方案-上下文"（Clause 5.2）
  • 注：文档中"ISO 42010定义架构模式"为严重误引，已彻底修正

B/S架构（Browser/Server，浏览器/服务器架构）是软件架构从“局域网协同”走向“互联网广域访问”的核心革新，并非孤立技术创新，而是解决C/S架构跨平台局限、适配互联网普及与全球用户访问需求的必然产物，经历了从Web技术萌芽、动态交互探索到标准化普及、云原生融合的完整演进过程。

一、技术与业务背景：催生B/S架构的核心痛点

1. C/S架构的固有局限性：
   20世纪90年代中期，C/S架构虽主导企业信息化，但在互联网场景下核心短板凸显：

   • 维护成本高昂：“胖客户端”需逐台安装、升级，跨地域多终端场景（如跨国企业、互联网用户）运维效率极低；
   • 跨平台兼容性差：客户端需适配Windows、Mac等不同操作系统，开发与适配成本翻倍；
   • 访问范围受限：依赖局域网或专用网络，无法支撑全球用户随时随地访问（如电商、门户网站需求）；
   • 资源占用过高：客户端需承载部分业务逻辑，对终端硬件配置有一定要求，限制用户覆盖范围。

2. 业务需求的核心驱动：

   • 互联网商业化爆发：1990年代后期，电子商务、门户网站兴起，企业需要面向全球用户提供无门槛访问服务；
   • 多终端访问诉求：PC、移动设备逐渐普及，用户希望通过统一入口访问服务，无需安装专用软件；
   • 低成本规模化扩张：企业需要降低用户使用门槛与自身运维成本，快速覆盖海量潜在用户；
   • 交互体验升级需求：从静态信息浏览转向动态交互（如在线购物、即时查询），要求架构支持灵活的数据交互与状态管理。

3. 技术基础的成熟支撑：

   • 互联网基础设施完善：TCP/IP协议全球普及，带宽持续提升，为广域网络通信提供稳定底层支撑；
   • Web核心技术突破：Tim Berners-Lee发明的HTML（超文本标记语言）、HTTP（超文本传输协议）形成标准，1993年Mosaic浏览器实现图形化界面，降低用户使用门槛；
   • 标准化组织推动：1994年万维网联盟（W3C）成立，主导HTML、CSS等标准统一，解决浏览器兼容性问题；
   • 动态Web技术萌芽：CGI（公共网关接口）、PHP、ASP等技术出现，实现静态网页向动态交互的跨越，支撑业务逻辑在服务器端运行。

C/S架构（Client/Server，客户端/服务器架构）是软件架构从“单机孤立”走向“网络协同”的关键里程碑，并非偶然的技术创新，而是适配局域网普及、多用户数据共享需求，平衡终端与服务器资源利用率的必然产物，经历了从思想雏形、技术落地到标准化普及的完整演进过程。

一、技术与业务背景：催生C/S架构的核心痛点

1. 单机架构的局限性凸显：
   20世纪60-70年代，软件系统以单机集中式为主，随着企业信息化推进，核心短板逐渐暴露：

   • 资源无法共享：单机存储的文件、数据只能本地使用，无法满足多部门协同需求（如企业财务数据、库存信息）；
   • 算力分配失衡：大型机承担全部计算任务，终端仅作为输入输出设备，资源利用率低；而个人计算机（PC）普及后，单机算力闲置与大型机负载过重形成矛盾；
   • 数据一致性难保障：多终端独立存储数据，易出现数据冗余、错误，无法支撑企业级核心业务（如银行转账、库存管理）；
   • 维护成本高昂：单机软件需逐台安装、升级，对于多终端企业来说，运维效率极低。

2. 业务需求的核心驱动：

   • 企业信息化转型：20世纪80年代，财务电算化、进销存管理等需求兴起，企业需要集中管理数据并支持多用户同时访问；
   • 多终端协同诉求：PC和工作站普及后，企业内部形成小型网络，员工需要跨设备共享打印机、文件、数据库等资源；
   • 性能与成本平衡：企业既希望利用PC的本地处理能力提升交互体验，又希望通过集中服务器降低数据管理成本，避免重复投入。

3. 技术基础的成熟支撑：

   • 局域网技术普及：Novell NetWare的IPX/SPX协议、以太网标准化落地，为终端与服务器的稳定通信提供了网络基础；
   • 硬件技术发展：Intel 80386等高性能处理器推出，PC本地计算能力显著提升，可承担部分业务逻辑处理；
   • 数据库技术突破：1970年IBM提出关系型数据库模型，Oracle 7等产品支持ACID事务，为数据集中存储与管理提供核心能力；
   • 开发工具成熟：Visual Basic 3.0等可视化编程工具出现，降低了客户端界面与交互逻辑的开发门槛。

一、CSS Modules 基础认知

1.1 CSS Modules 的定义与核心目标

CSS Modules 是一种通过构建工具（如 Webpack、Vite 等）实现的 CSS 模块化方案，其核心是将 CSS 文件视为独立的“模块”——每个 CSS 文件中的类名、动画等样式规则默认具有局部作用域，且可通过导入导出机制与 JavaScript 组件关联使用。

其核心目标包括：

• 解决传统 CSS 的全局作用域污染问题，实现组件级别的样式隔离；
• 消除类名命名冲突（尤其在大型项目或多人协作场景中）；
• 建立 CSS 与组件的强关联，提升样式的可维护性和可追踪性；
• 提供模块化的样式复用机制，平衡样式封装与重用需求。

1. SCSS基础概念与核心认知

1.1 什么是 SCSS 与 CSS 预处理器

1.1.1 SCSS 的定义与定位

SCSS（Sassy CSS）是 Sass（Syntactically Awesome Stylesheets）的一种语法扩展，属于 CSS 预处理器的核心成员。

• 语法定位：SCSS 诞生于 Sass 3 版本，是为了兼容 CSS 语法而设计的“类 CSS 语法”形式（另一种 Sass 语法为缩进式，无大括号和分号）。它完全兼容 CSS3 语法，开发者可以直接在 SCSS 中编写原生 CSS 代码，降低了学习和迁移成本。
• 核心特性：作为 CSS 预处理器，SCSS 扩展了 CSS 的功能，引入了变量、嵌套、继承、混合（Mixin）、函数、流程控制等编程特性，让样式编写更接近“编程语言”的逻辑，而非单纯的“标记语言”。
• 本质作用：SCSS 本身不能直接被浏览器解析，需要通过编译器（如 Dart Sass、Node Sass、 Ruby Sass）转换为原生 CSS 后才能运行，其核心价值是提升样式开发的效率和可维护性。

一、Sass 与 SCSS 基础概念

1.1 历史渊源与核心关系

• Sass 的起源：2006 年由 Hampton Catlin 首次发布，最初设计目标是解决 CSS 原生语法的冗余性和可维护性问题。其采用缩进式语法（无大括号、分号），灵感源自 Ruby 等语言的简洁风格，是最早的 CSS 预处理器之一。
• SCSS 的诞生：2010 年 Sass 推出第三代版本，命名为 "Sassy CSS"（简称 SCSS）。由于早期 Sass 的缩进语法对习惯 CSS 大括号风格的开发者不够友好，SCSS 回归类 CSS 语法（保留大括号和分号），同时继承 Sass 的所有功能，成为 Sass 的主流语法。
• 核心关联：SCSS 并非独立于 Sass 的新语言，而是 Sass 的语法扩展，完全兼容原生 CSS。这意味着任何 valid 的 CSS 代码都可以直接作为 SCSS 代码运行，极大降低了 CSS 开发者的学习和迁移成本。目前行业中 85% 以上的项目使用 SCSS，Sass 缩进语法仅在少数场景中使用。

一、JS模块化编程背景

计算机语言编程中，模块化编程对架构设计、代码复用起到至关重要的作用，工程中引入他人写好的库和模块能大大缩减开发周期。C/C++中，可以用include关键字，Java中可以用import关键字。

模块化编程是一种软件设计技术，强调将程序的功能分为独立的、可互换的模块，以使每个模块都包含执行所需功能的一个方面所必需的一切。模块接口表示该模块需要的元素和提供的元素。模块化程序设计与结构化程序设计、面向对象程序设计密切相关，目标都是通过分解成较小的部分来促进大型软件程序和系统的构建。

Vue CLI（Vue Command Line Interface），是一个用于快速搭建项目的工具，用于基于Vue.js进行快速开发。

• 提供了标准化的项目结构**，帮助开发者快速搭建项目框架；**
• 支持插件体系**，允许在项目中灵活添加功能；**
• 简化了Vue.js开发的配置和构建过程，集成了开发环境，简化了开发过程。

具体提供的一系列功能包括：