CSS-in-JavaScript

相关源文件

• css-in-javascript/README.md
• linters/.markdownlint.json
• package.json

本文档解释了 Airbnb 的 CSS-in-JavaScript 方法，包括命名约定、代码结构、内联样式和主题指南。它概述了使用 JavaScript 对象而不是传统 CSS 文件为 React 组件设置样式的最佳实践。有关 React/JSX 组件本身的详细信息，请参阅React/JSX 样式指南。

Airbnb 的 CSS-in-JavaScript 简介

CSS-in-JavaScript 是一种用于为 Web 应用程序设置样式的技术，它摒弃了传统的 CSS 文件，而是直接在 JavaScript 中定义样式。在 Airbnb，此方法用于创建可维护、可主题化且与 React 干净集成的组件样式。

Airbnb CSS-in-JavaScript 样式指南为工程团队提供了一种标准化的方法，侧重于可读性、可维护性和可扩展性。

主要特性：抽象层

该指南建议使用诸如react-with-styles这样的抽象层，它提供了

• 主题化功能
• 样式应用实用程序
• 实现独立性

来源：css-in-javascript/README.md261-263

组件和样式结构

样式定义放置

图：样式定义模式

在 Airbnb 的 CSS-in-JavaScript 模式中，样式在组件定义之后定义，并直接传递给高阶组件 (HOC) 函数。这种方法减少了间接性，并将相关代码放在一起。

来源：css-in-javascript/README.md156-194

嵌套和格式化

定义嵌套样式时，在相同缩进级别的相邻块之间留一个空行，以提高可读性并减少合并冲突。

来源：css-in-javascript/README.md196-230

命名约定

选择器命名

Airbnb CSS-in-JavaScript 指南规定了几种关键的命名模式

1. 对象键（选择器）使用 camelCase

2. 下划线用于修饰符

3. selector_fallback 用于回退样式

4. 用于断点的设备无关名称

来源：css-in-javascript/README.md13-152

内联样式与主题样式

图：样式方法决策流程

对具有以下特性的属性使用内联样式

• 基数高（值可能很多）
• 使用 prop 的值

对具有以下特性的属性使用主题样式

• 基数低（离散值集）
• 跨组件共享

这种方法可以优化性能，因为生成主题样式表可能成本很高。

来源：css-in-javascript/README.md232-257

主题系统

主题结构和使用

图：主题结构和集成

Airbnb 的 CSS-in-JavaScript 系统使用全面的主题系统，具有几个关键类别的设计主题值

1. 颜色

   • 在主题中定义所有颜色
   • 通过 ({ color }) => ({ element: { color: color.value } }) 访问

2. 字体

   • 将字体定义为相关样式的集合
   • 通过 ({ font }) => ({ element: { ...font.style } }) 访问

3. 网格单位

   • 在主题中定义基本网格单位
   • 通过函数或值访问：units(8) 或 8 * unit

4. 媒体查询

   • 在主题中定义断点
   • 用法：[breakpoint.medium]: { styles }

5. 回退

   • 为 CSS 属性定义回退策略
   • 用法：[fallbacks.property]: 'value' 或 [fallback('property')]: 'value'

主题命名空间管理

自定义主题应

• 谨慎创建（许多应用程序可能只有一个主题）
• 将自定义设置命名在具有唯一键的嵌套对象下

来源：css-in-javascript/README.md259-428

与 React 组件集成

Airbnb 中 React 组件和 CSS-in-JavaScript 之间的主要集成机制是来自 react-with-styles 库的 withStyles 高阶组件。此 HOC

1. 接受一个函数，该函数接收主题变量并返回一个样式对象
2. 包装 React 组件，注入 styles prop
3. 提供 css() 实用程序，用于将样式应用于元素

图：组件和样式生命周期

用法示例

这种模式允许组件特定的样式访问共享的主题值，同时保持能够根据 props 自定义样式的能力。

来源：css-in-javascript/README.md156-194 css-in-javascript/README.md232-257 css-in-javascript/README.md261-428

最佳实践总结

类别	最佳实践	原理
命名	选择器使用 camelCase	允许在 JavaScript 中轻松访问为属性
命名	修饰符使用下划线	类似于 BEM，显示样式之间的关系
命名	使用设备无关的断点名称	避免对设备的错误假设
排序	在组件之后定义样式	减少间接性并组织相关代码
嵌套	块之间留空行	提高可读性并减少合并冲突
内联	高基数属性使用内联	优化动态值的性能
主题化	在主题中定义颜色、字体、单位	创建一致的设计系统
主题化	自定义主题设置命名空间	防止命名冲突

来源：css-in-javascript/README.md13-428