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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
설치 방법 보기설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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 */ } }
아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.
로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.
아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.
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.
한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.