Senior LevelCSS & Modern Layouts
How do you prevent CSS conflicts in micro-frontend architectures?
❓ Interview Prompt: Explain CSS isolation strategies for independently deployed micro-frontends sharing a single page.
Micro-frontends load independently built CSS from different teams onto the same page, risking style conflicts:
Isolation Strategies:
1
Shadow DOM: Complete encapsulation. Styles don't leak in or out.
2
CSS @scope: Scope styles to a subtree without Shadow DOM overhead.
3
CSS Layers (@layer): Each micro-frontend registers its own layer. Layer priority order is controlled by the shell application.
4
CSS Modules / CSS-in-JS: Build-time class name hashing ensures uniqueness (e.g.,
.card_abc123).5
Namespace Prefix Convention: All selectors prefixed with team name:
.team-a-card, .team-b-card.Code Implementation Example
css
/* Shell app defines layer order */
@layer shell, team-a, team-b, overrides;
/* Team A's CSS */
@layer team-a {
.team-a-card { padding: 16px; }
}
/* Team B's CSS */
@layer team-b {
.team-b-card { padding: 24px; }
}
/* Alternative: @scope isolation */
@scope ([data-mfe="team-a"]) {
.card { padding: 16px; } /* Only matches inside team-a container */
}💡Micro-frontend CSS isolation using @layer and @scope.
🎯 Interview Key Takeaway
Use @layer for cascade control and @scope or Shadow DOM for style isolation in micro-frontend architectures.
#Micro-frontends#Isolation#Architecture#Senior
Back to all CSS & Modern Layouts Questions→