skills.rest
islamu-ngo
islamu-ngoOFFICIAL
Explore all skills by this author →
GitHub

blazor-css-isolation

Applies BEM naming and CSS isolation rules to Blazor .razor.css component styles.

7|3|Updated Sep 23, 2025
Search Tags:#styling#blazor#mudblazor#bem#razor#scoped css#css isolation
One-click install
npx skills add https://github.com/islamu-ngo/Event --skill blazor-css-isolation-islamu-ngo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: blazor-css-isolation
Source: https://github.com/islamu-ngo/Event/tree/main/.agents/skills/blazor-css-isolation
Command: npx skills add https://github.com/islamu-ngo/Event --skill blazor-css-isolation-islamu-ngo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Styling Blazor components consistently is difficult because scoped CSS, MudBlazor internals, and global stylesheets interact in non-obvious ways, leading to broken selectors, specificity conflicts, and fragile ::deep overrides. ## Core Features & Use Cases - CSS Isolation Rules: Enforces colocated .razor.css files, BEM naming, native CSS nesting limits, and container query patterns for component-level responsiveness. - MudBlazor Styling Guidance: Defines a customization priority order (component parameters, Class utilities, MudTheme, CSS variables, wrapper components, ::deep as last resort) with v9 migration notes. - Global CSS Architecture: Documents an @layer cascade (reset, base, tokens, mudblazor-overrides, components, utilities) with a whitelist policy for global .mud-* overrides. - Use Case: When a MudTable's internal cells need custom padding, wrap the component in a BEM-classed div and target .mud-table-cell via ::deep instead of writing global overrides. ## Quick Start Ask the AI to review or write the scoped CSS for a Blazor component following the blazor-css-isolation rules before applying any ::deep selectors.

Frequently Asked Questions about blazor-css-isolation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I style MudBlazor component internals with CSS isolation?▼

Wrap the MudBlazor component in a div with a BEM class, then use ::deep selectors targeting internal classes like .mud-table-cell from the component's .razor.css file. Treat ::deep as a last resort after component parameters, Class utilities, MudTheme, and CSS variables.

How to use BEM naming with Blazor scoped CSS?▼

Use one block namespace per component with .block, .block__element, and .block--modifier selectors in the colocated .razor.css file. Native CSS nesting supports pseudo-classes and modifiers via &, but BEM concatenation like &__element does not work outside Sass.

Why is my Blazor isolated CSS not applying?▼

Verify the .razor.css filename matches the component name, the scope attribute (b-xxxxxxxxxx) exists in the DOM, and the generated {Project}.styles.css bundle is referenced in the host page. Also check selector specificity and ::deep placement.

What changed in MudBlazor v9 for custom CSS?▼

MudTabs class parameters were renamed (TabPanelClass to TabButtonsClass, PanelClass to TabPanelsClass), MudSwitch/CheckBox/Radio render content inside a span, and MudDrawer uses CSS transition instead of animation. Update ::deep selectors targeting these internals after upgrading.

When should I avoid ::deep selectors in Blazor?▼

Avoid ::deep for styling your own child components; style them in their own .razor.css or pass class names through parameters instead. Reserve ::deep for third-party internals, since those selectors break when libraries rename internal classes.

Related Skills

Explore More Software Engineering Skills→
ViewableGravyViewableGravy

css_general

Generate component-scoped CSS files with a provided template.

Community
Basic
Norfolk-GroupNorfolk-Group

hbg-design-philosophy

Define HBG Portal visual identity and UX design language with CSS tokens and typography rules.

Official
Advanced
FoxSilouFoxSilou

blazor-ui-kit

Encapsulate Radzen Blazor components behind French-named wrappers.

Community
Intermediate
grimmolfgrimmolf

Frontend CSS

Apply standardized CSS practices to resolve inconsistent frontend styling.

Community
Basic