Best Practices

Define styles at module scope

Prefer:

const styles = {
  root: style.slot({ padding: 12 }),
};

Avoid creating new style builders inside every render unless the style truly depends on render-time data.

Publish slots deliberately

Slots are public styling API. Give them stable names and avoid exposing internal wrappers that you may want to remove later.

Use themes for slot-aware overrides

Use css for one element. Use theme for component parts.

<Card css={style({ marginTop: 12 })} />
<Card theme={compactCard} />

Keep selectors local

Prefer slot overrides over deep custom selectors. If a consumer needs a selector to reach into a component, that part probably deserves a slot.

Let extraction optimize static chains

Keep design-system styles in module-level constants. This gives the compiler the best chance to extract static rules.

Use runtime for real dynamic values

Do not fight the compiler for values that only exist at render time. Fluentic Style intentionally keeps runtime fallback available.

Import the virtual runtime module once

In plugin mode, import:

import 'virtual:fluentic-styles';

Do it once near the application entry.