CarbonIBM 企业级设计系统的拆解【免费下载链接】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⌨️ 开发命令速查命令用途yarn build用 Lerna 构建各包yarn test运行 Jest 单元测试yarn lint用 ESLint 检查代码yarn lint:styles用 Stylelint 检查 SCSSyarn format用 Prettier 格式化文件yarn clean重置项目状态并清理依赖 编码约定类名统一前缀选择器一律以全局变量$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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考