企业官网建设流程全解析

Carbon：IBM 企业级设计系统的拆解

【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon

一句话定位

Carbon Design System 是 IBM 开源的企业级设计系统。它把 React 组件、Web Components、SCSS 样式、设计令牌和图标库收进同一个仓库（monorepo），让你直接获得一致且可访问的用户界面。构建数据密集型企业应用时，这套体系可以省掉大量重复建设。

🗂️ 能力全景图

仓库按三层组织，上层封装并复用下层。

• Layer 0 基础层：@carbon/colors、@carbon/grid、@carbon/themes、@carbon/type等提供颜色、网格、动效、字体等设计令牌，对仓库其余部分依赖最少。
• Layer 1 原语层：@carbon/styles与@carbon/icons-react聚合基础层，产出低层样式积木和框架图标组件。
• Layer 2 组件层：@carbon/react与@carbon/web-components是官方组件实现，业务项目直接从这里取用。
• 工具链：@carbon/upgrade提供迁移用的代码转换，packages/cli是仓库内的命令行工具。

🚀 从零到跑通

先准备环境：Node 20 以上。仓库通过packageManager字段声明使用 Yarn 4，克隆后首次运行会按声明版本自举。

git clone https://gitcode.com/GitHub_Trending/carbo/carbon

进入目录安装全部包的依赖。Yarn workspaces 会同时完成跨包链接。

yarn install

构建所有包。这条 monorepo 开发流程由 Lerna 驱动，它会依次运行各包的 build 脚本。

yarn build

⌨️ 开发命令速查

📐 编码约定

类名统一前缀

选择器一律以全局变量$prefix开头，并采用 BEM 块-元素命名。

.#{$prefix}--inline-notification { ... } .#{$prefix}--inline-notification__details { ... }

前缀可替换，这让消费方能在同一页面里定制类名前缀而不产生样式冲突。

SassDoc 标注公共 API

共享的函数、mixin 和变量要求用///注释标注@access与@group。public 级别的条目即构成 Sass 侧的公开接口，方便审查变更。

🛠️ 进阶实践

依赖锁定场景：CI 安装结果必须与本地完全一致。 做法：yarn.lock是唯一事实来源，CI 使用yarn install --immutable禁止锁文件被改写。

本地联调场景：业务项目想消费你正在改动的本地样式。 做法：在消费方执行yarn link /path/to/carbon/packages/styles指向本仓库，改完样式后重新构建该包即可生效。

组件弃用场景：某个组件要下线，但不能破坏现有用户。 做法：保留组件，开发模式下用warning输出一次性控制台警告，声明将在下一个大版本移除，并指向替代组件。

延伸索引

• 开发者手册
• 包结构说明
• 代码风格指南
• React 组件源码
• 样式包

【免费下载链接】carbonA design system built by IBM项目地址: https://gitcode.com/GitHub_Trending/carbo/carbon