Back to Details

styling

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Styling Guidelines

样式规范指南

Minimize Wrapper Elements

尽量减少包装元素

Avoid creating unnecessary wrapper divs. If classes can be applied directly to an existing semantic element with the same outcome, prefer that approach.

避免创建不必要的包装div。如果可以直接将类应用到现有语义化元素并达到相同效果，优先采用这种方式。

Good (Direct Application)

推荐写法（直接应用）

svelte

<main class="flex-1 mx-auto max-w-7xl">
	{@render children()}
</main>

svelte

<main class="flex-1 mx-auto max-w-7xl">
	{@render children()}
</main>

Avoid (Unnecessary Wrapper)

避免写法（不必要的包装）

svelte

<main class="flex-1">
	<div class="mx-auto max-w-7xl">
		{@render children()}
	</div>
</main>

This principle applies to all elements where the styling doesn't conflict with the element's semantic purpose or create layout issues.

svelte

<main class="flex-1">
	<div class="mx-auto max-w-7xl">
		{@render children()}
	</div>
</main>

这一原则适用于所有样式不会与元素语义目的冲突或造成布局问题的元素。

Tailwind Best Practices

Tailwind最佳实践

Use the
```
cn()
```
utility from
```
$lib/utils
```
for combining classes conditionally
Prefer utility classes over custom CSS
Use
```
tailwind-variants
```
for component variant systems
Follow the
```
background
```
/
```
foreground
```
convention for colors
Leverage CSS variables for theme consistency

使用来自
```
$lib/utils
```
的
```
cn()
```
工具函数来条件性组合类
优先使用工具类而非自定义CSS
使用
```
tailwind-variants
```
构建组件变体系统
遵循
```
background
```
/
```
foreground
```
颜色命名约定
利用CSS变量保证主题一致性