mirror of
https://github.com/langgenius/dify.git
synced 2026-04-22 07:46:31 +08:00
45 lines
1.4 KiB
Markdown
45 lines
1.4 KiB
Markdown
# Rule Catalog — Code Quality
|
||
|
||
## Conditional class names use utility function
|
||
|
||
IsUrgent: True
|
||
Category: Code Quality
|
||
|
||
### Description
|
||
|
||
Ensure conditional CSS is handled via the shared `classNames` instead of custom ternaries, string concatenation, or template strings. Centralizing class logic keeps components consistent and easier to maintain.
|
||
|
||
### Suggested Fix
|
||
|
||
```ts
|
||
import { cn } from '@/utils/classnames'
|
||
const classNames = cn(isActive ? 'text-primary-600' : 'text-gray-500')
|
||
```
|
||
|
||
## Tailwind-first styling
|
||
|
||
IsUrgent: True
|
||
Category: Code Quality
|
||
|
||
### Description
|
||
|
||
Favor Tailwind CSS utility classes instead of adding new `.module.css` files unless a Tailwind combination cannot achieve the required styling. Keeping styles in Tailwind improves consistency and reduces maintenance overhead.
|
||
|
||
Update this file when adding, editing, or removing Code Quality rules so the catalog remains accurate.
|
||
|
||
## Classname ordering for easy overrides
|
||
|
||
### Description
|
||
|
||
When writing components, always place the incoming `className` prop after the component’s own class values so that downstream consumers can override or extend the styling. This keeps your component’s defaults but still lets external callers change or remove specific styles.
|
||
|
||
Example:
|
||
|
||
```tsx
|
||
import { cn } from '@/utils/classnames'
|
||
|
||
const Button = ({ className }) => {
|
||
return <div className={cn('bg-primary-600', className)}></div>
|
||
}
|
||
```
|