القائمة
Blazor CSS isolation patterns with BEM methodology. Covers component.razor.css scoped styling, ::deep selector for child components, and BEM class naming conventions.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Run the canonical build plus all nine per-project test commands from docs/TESTING.md. Never uses solution-level dotnet test.
Create or re-baseline lean, repository-grounded implementation plans and persistent dev docs when users ask for an implementation plan, technical plan, feature plan, refactor plan, or dev-docs workstream.
Senior CTO review workflow for repository-grounded implementation-plan workstreams used before coding.
Apply project EF Core conventions for repositories, DbContext setup, query filters, migrations, and seeded lookup data.
Create a self-contained HTML artifact focused on a high-quality SVG architecture or system diagram with minimal supporting prose.
Create a pragmatic self-contained HTML plan that organizes the user's plan content visually without expanding the scope unnecessarily.
| name | blazor-css-isolation |
| description | Blazor CSS isolation patterns with BEM methodology. Covers component.razor.css scoped styling, ::deep selector for child components, and BEM class naming conventions. |
| type | ui |
| enforcement | suggest |
| priority | high |
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/TEMPLATE_GLOSSARY.md.
Component‑scoped CSS with BEM; ::deep only when required.
**/*.razor.css, **/*.razor, **/wwwroot/css/*.css.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 */ } }