...
CSS variables are the preferred approach going forward but there are a number of places where we are required to have static variables such as in CSS media queries.
Currently In Totara 16 and earlier we only support root-level CSS variables to allow for full compatibility with IE11.
...
The Tui framework does aim at style isolation, however it does not make use of real isolation via the Shadow DOM. This particular feature is was not relied upon initially used because we require required support for IE11, which does not support the Shadow DOM. There is an alternative available within Vue SFCs, 'scoped styles', however we also have not adopted this approach which generates a unique identifier and applies that to selectors. The reason we have not adopted this approach is because of style inheritance across themes - if there is a unique identifier on a given selector then a child theme wanting to override that selector would need to also somehow know about the unique identifier.
...
Because of our ongoing dependency on the Legacy theme, which styles parts of the UI such as the primary navigation and footer, we still have globally scoped Bootstrap and Legacy-based far-reaching styles battling for dominance with Tui framework specifics. We cannot could not rely on the CSS value unset because that too is not supported in IE11, therefore, Tui components provide the overrides they need to operate in isolation.
...