CSS and styling — Nexis documentation

Keep static styles static

Nexis can extract static style objects to CSS. A static route should not require a JavaScript runtime merely to appear correctly styled.

Structure and scope

Use semantic component names, avoid global collision patterns, and keep the visual system coherent across pages rather than adding per-route one-off overrides.

Design for Arabic and accessibility

Test logical properties and RTL direction, visible keyboard focus, readable contrast, responsive width, and reduced motion. Critical styles should be available with initial HTML.

PRACTICAL LABS

Run this capability.

Each example states the observable output, the boundary that remains your responsibility, and the check that proves the result.

Keep critical styling static

CSS

.article-card {
  border-inline-start: 2px solid #baf55e;
  padding: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}

OUTPUT: The first HTML response remains legible and keyboard-accessible.
BOUNDARY: Do not require JavaScript to establish text contrast or focus visibility.
PROVE IT: Check a narrow viewport, keyboard focus, RTL, and scripts-disabled rendering.

VERIFICATION

Prove the contract.

Inspect production CSS, exercise RTL layouts, keyboard focus, narrow screens, color contrast, and script-disabled rendering.