Implementation techniques to scope CSS
If every micro frontend follows a global CSS convention, then conflicts can be avoided on the meta level already. The easiest convention is to prefix each class with the name of the micro frontend. So, for instance, if one micro frontend is called shopping and another one is called checkout then both would rename their active class to shopping-active / checkout-active respectively.
Figure 13.2 – Prefixing CSS class names by convention to avoid collisions
The same can be applied to other potentially conflicting names, too. As an example, instead of having an ID such as primary-button, we’d call it shopping-primary-button in the case of a micro frontend called shopping. This is also shown in Figure 13.2.
If, for some reason, we need to style an element such as a div or img, we should use descendent selectors such as .shopping img to style the img tag of a micro frontend called shopping. This now applies...
