元子化样式

元子化样式是 tui-vitex 编译器的核心功能之一，它允许开发者使用简短的类名来表达复杂的样式，提高开发效率和代码可读性。

什么是元子化样式

元子化样式（Atomic CSS）是一种 CSS 架构方法，将样式分解为最小的可重用单元，每个类名对应一个具体的样式属性。

例如：

tbg-pn - 主背景色（primary-normal）
tp-m - 中等内边距（padding-medium）
ttl1 - 一级文本颜色（text-level-1）

工作原理

收集阶段：编译器在编译过程中收集模板中的元子化样式类
生成阶段：根据收集到的类名生成对应的 CSS 代码
注入阶段：将生成的 CSS 注入到应用中

收集过程

编译器会分析 .uvue 文件的模板部分，提取所有以 t 开头的样式类：

// 从模板中提取样式类
const a = extractClasses(descriptor.template.ast, newMagicCode);

// 从脚本中提取样式类
const jsa = extractScriptStyle(descriptor.scriptSetup.content, descriptor.scriptSetup.loc.start.offset,
    newMagicCode, id);

生成过程

根据提取的类名和主题配置，生成对应的 CSS 代码：

// 生成 CSS 字符串
const css_str = styleConcatenation([...a, ...jsa], option, newMagicCode, webdev ? devgeneratedCSSClasses : generatedCSSClasses);

// 写入 CSS 文件
if (webdev) {
    appendToCssFileSync(css_str);
} else {
    insertcss(newMagicCode, css_str);
}

支持的样式类

颜色类

类名	描述	示例
`tbg-{type}{effect}`	背景色	`tbg-pn` (主背景色)
`tfg-{type}{effect}`	前景色	`tfg-en` (错误前景色)
`ttc-{type}{effect}`	文本颜色	`ttc-pn` (主文本色)
`tbc-{type}{effect}`	边框颜色	`tbc-pn` (主边框色)

类型（type）：

i - info（信息）
p - primary（主色）
e - error（错误）
w - warning（警告）
s - success（成功）

效果（effect）：

n - normal（正常）
d - dark（深色）
l - light（浅色）
p - plain（朴素）

文本类

类名	描述	示例
`ttl{level}`	文本级别	`ttl1` (一级文本)
`tfs{size}`	字体大小	`tfsm` (中等字体)

文本级别：

ttl1 - 一级文本（最主要）
ttl2 - 二级文本
ttl3 - 三级文本
ttl4 - 四级文本（最次要）

字体大小：

tfsl - large（大）
tfsm - medium（中等）
tfss - small（小）
tfsmi - mini（极小）

间距类

类名	描述	示例
`tm-{size}`	外边距	`tm-m` (中等外边距)
`tp-{size}`	内边距	`tp-m` (中等内边距)

间距大小：

tm/tp - 默认大小
tml/tpl - large（大）
tmm/tpm - medium（中等）
tms/tps - small（小）
tmmi/tpmi - mini（极小）

方向修饰：

tm-l/tp-l - 左边距/内边距
tm-r/tp-r - 右边距/内边距
tm-t/tp-t - 上边距/内边距
tm-b/tp-b - 下边距/内边距

边框类

类名	描述	示例
`tb{level}`	边框宽度	`tb1` (一级边框)
`tr{size}`	边框圆角	`tr-m` (中等圆角)

边框级别：

tb1 - 一级边框（最细）
tb2 - 二级边框
tb3 - 三级边框
tb4 - 四级边框（最粗）

圆角大小：

tr - 默认大小
trl - large（大）
trm - medium（中等）
trs - small（小）
trmi - mini（极小）

自定义样式

在模板中使用

html

<view class="tbg-pn tp-m tr-m">
  <text class="ttl1 tfsm">Hello World</text>
</view>

在脚本中使用

// 使用 // @tui-autocss-include 注释标记
// @tui-autocss-include
const styles = {
  container: 'tbg-pn tp-m',
  text: 'ttl1 tfsm'
};

性能优化

去重处理：编译器会自动去重相同的样式类
按需生成：只生成实际使用的样式类
开发模式优化：开发模式下会累积生成样式，提高开发效率
生产模式优化：生产模式下会最小化 CSS 代码

最佳实践

合理使用：只使用必要的样式类，避免过度使用
语义化命名：使用有意义的类名，提高代码可读性
组合使用：结合多个样式类实现复杂效果
避免冲突：不要与自定义类名冲突
定期清理：删除未使用的样式类

常见问题

样式不生效

检查是否正确引入了 autocss.css
确认样式类名拼写正确
检查主题配置是否正确

编译报错

检查模板语法是否正确
确认样式类名格式是否符合规范
查看控制台错误信息

通过合理使用元子化样式，你可以显著提高开发效率，减少 CSS 代码量，同时保持代码的清晰和可维护性。

元子化样式 ​

什么是元子化样式 ​

工作原理 ​

收集过程 ​

生成过程 ​

支持的样式类 ​

颜色类 ​

文本类 ​

间距类 ​

边框类 ​

自定义样式 ​

在模板中使用 ​

在脚本中使用 ​

性能优化 ​

最佳实践 ​

常见问题 ​

样式不生效 ​

编译报错 ​