{% raw %}
Use CSS utility functions and avoid complex inline calculations for better maintainability and readability. Prefer `cx()` from useStyles for combining CSS classes instead of template literals, and use `css` from antd-style for simple styles without design tokens.
**Recommended patterns:**
```ts
// ✅ Good: Use cx() for combining classes
const { styles, cx } = useStyles();
// ❌ Avoid: Template literal concatenation
// ✅ Good: Simple CSS without tokens
import { css, cx } from 'antd-style';
const extraTitle = css`
font-weight: 300;
white-space: nowrap;
`;
// ❌ Avoid: Complex CSS calculations that are fragile
style={{ maxHeight: `calc(75vh - 56px - 13px - ${gap}px)` }}
```
Avoid overly complex CSS calculations that depend on magic numbers, as they become fragile when layouts change. Consider using CSS inheritance properties or more robust layout solutions instead.
{% endraw %}