How to resolve the style conflict issue between two micro frontends using different versions of the design system? How to address CSS specificity?

Problems of style conflicts between micro frontends with different versions of the design system and CSS specificity issues are addressed in several ways:

1. Style isolation

   • Using CSS modules or CSS-in-JS (e.g., styled-components, Emotion), which generate unique classes and minimize overlaps.
   • Shadow DOM — isolates the component's styles, preventing leaks and conflicts.

2. Class namespacing

   • Adding prefixes to classes in each micro frontend, for example, .app1-button and .app2-button, to avoid overlaps.

3. Managing style loading

   • Load micro frontend styles dynamically and only when necessary.

4. Increasing specificity

   • Use more specific selectors, for example, nesting with a unique root class.
   • Avoid !important, as it complicates maintenance.

5. Versioning and compatibility

   • Unify the design system where possible or ensure backward compatibility.

Example of namespacing:

/* Micro frontend 1 */
.app1-button { background-color: blue; }

/* Micro frontend 2 */
.app2-button { background-color: red; }

And in markup:

<button class="app1-button">Button 1</button>
<button class="app2-button">Button 2</button>

Thus, each micro frontend manages its styles without conflicts.