Load when editing Blazor `.razor.css`, scoped selectors, `::deep`, BEM class names, RTL/logical CSS properties, or styling nested MudBlazor components; not for global design tokens or non-Blazor CSS.
The English summary is being prepared. Showing the original description.
See how to installReview the instructions the agent will receive before you install.
ABOUTME: CSS isolation + BEM rules for Blazor components. ABOUTME: Read referenced resources before applying.
Project-Agnostic CSS Isolation Patterns for Blazor
Placeholders use
{Placeholder}syntax - see docs/internal/TEMPLATE_GLOSSARY.md.
.razor.css file must match component name (colocated).::deep.::deep only for third‑party internals (fragile).{Project}.styles.css is referenced in host.<div> with a BEM class before using ::deep selectors.Class + utility classes → MudTheme → CSS variables → wrapper components → ::deep (last resort).!important in isolated CSS.Global styles use @layer cascade ordering via css/layers.css:
@layer reset, base, tokens, mudblazor-overrides, components, utilities;
Each layer file is imported with @import url("file.css") layer(name). The layer order determines cascade priority — later layers win over earlier ones regardless of specificity. Files:
| Layer | File | Contents |
|---|---|---|
reset | reset.css | Universal margin/padding reset, link/list reset |
base | base.css | html/body defaults, scroll-lock |
tokens | tokens.css | 3-tier design tokens (primitives → semantic → component) |
mudblazor-overrides | mudblazor-overrides.css | Approved .mud-* exceptions with justification comments |
components | components.css | .isl-card, footer, .isl-button-pill, .isl-popover-menu, .isl-form-* |
utilities | utilities.css | .isl-typo-*, .sr-only, a11y media queries |
Use native CSS nesting with & in .razor.css files:
:hover, :focus), pseudo-elements (::before), modifiers (&.block--modifier), media/container queries&__element does NOT work in native CSS (Sass-only). Keep BEM element selectors flat./* CORRECT */
.my-card {
border: 1px solid var(--isl-color-border);
&:hover { transform: translateY(-2px); }
&.my-card--featured { border-color: var(--mud-palette-primary); }
@media (max-width: 48em) { padding: var(--isl-space-3); }
}
/* WRONG — BEM concatenation doesn't work in native CSS */
.my-card { &__title { font-weight: 600; } }
Use container-type: inline-size on layout wrappers, then @container queries inside child selectors for component-level responsive adaptation:
.event-list__main { container-type: inline-size; }
::deep .event-grid { @container (max-width: 599.98px) { /* single column */ } }
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Load for Blazor/MudBlazor UI changes involving forms, dialogs, focus, keyboard navigation, landmarks, ARIA, color contrast, RTL-safe styling, or WCAG 2.2 AA tests; not for backend-only changes.
The English summary is being prepared. Showing the original description.
Load when a task asks to research, verify, compare, or look up framework/package behavior, release notes, standards, RFCs, CVEs, or unfamiliar APIs; use repository evidence first, then official docs, and not for codebase navigation alone.
The English summary is being prepared. Showing the original description.
Load for Aspire AppHost work: start/stop/wait resources, inspect dashboard/logs/traces, add integrations/resources, rebuild a service, run isolated worktrees, or diagnose Aspire orchestration; not for plain dotnet apps, container-only deployments, or cloud deployment.
The English summary is being prepared. Showing the original description.
Load for authentication or authorization changes involving BFF cookies/tokens, JWT validation, claims/user ID extraction, policies, handler access checks, impersonation, or 401/403 bugs; not for UI affordance gating alone.
The English summary is being prepared. Showing the original description.
Load for Blazor BFF server work involving YARP proxy routes, cookie sessions, access-token forwarding/refresh, downstream API calls, BFF handlers, or browser-to-API auth failures; not for client component rendering or API JWT validation alone.
The English summary is being prepared. Showing the original description.
Load for Blazor/MudBlazor component or page changes involving render modes, dialogs, parameters/events, HAL-gated actions, generated API clients or generated record consumption, theming, or component tests; add accessibility or CSS-isolation only when touched.
The English summary is being prepared. Showing the original description.