05-styling/05-inline-style-vs-css.md

Inline style vs CSS

Inline style vs CSS

In Vroq apps, both inline style and component CSS are valid tools. The key is using them consistently and for the right reasons.

The general rule is: use **inline style for small layout adjustments** and **component CSS for reusable or structural styling**.

When to use inline style

Inline style is usually the best choice when:

• the styling is local to one place
• the styling is simple layout configuration
• the styling improves readability of the layout

Examples:

• small spacing adjustments
• flex alignment tweaks
• width or height constraints

Example:

VStack({ gap: "lg", style: { padding: "32px" } }, ...)

Inline style keeps small layout decisions close to the UI structure.

When to use CSS

Component CSS (often injected with ensureCSS(...)) is appropriate when:

• the styling defines a reusable visual pattern
• hover, focus, or variant behavior is required
• repeating the style inline would make the UI noisy
• the component has a defined visual identity

Examples:

• button variants
• card styles
• badge styling

Avoid mixing too many layers

Avoid styling approaches where the same visual property is controlled by:

• component CSS
• inline style
• multiple wrapper elements

This makes the code difficult to reason about.

Prefer a single clear source for each visual decision.

Rules

• use inline style for small local layout changes
• use CSS for reusable component structure
• avoid large inline style objects that obscure layout
• avoid global CSS overrides when component-level styling is sufficient

Final rule

Choose the styling method that makes the UI structure easiest to read and maintain.