@extending .class selectors leads to trouble for specific styling.

[peebeebee]

Describe the bug
Because the storefront is using @extend on classes that developers also use in their own codebase for the storefront.
This is the list that is causing trouble for selector sizes:\

.modal-dialog
.modal-dialog-centered
.modal-lg
.modal-content
.modal-header
.modal-body
.btn
.btn-link
.btn-sm
.btn-primary
.btn-block

For example, when a developer writes something like the following:

.some-site-specific-selector {
   .modal-dialog {
       background: red;
   }
}

This .modal-dialog ruleset will be added to all the places where .modal-dialog is extended in the original codebase.
See: https://webinista.com/updates/dont-use-extend-sass/ for a short explanation.
This leads to severe selector bloat in a lot of applications.

Tell us the version of Spartacus

• Library version: 2211.25.x

To Reproduce
Steps to reproduce the behavior:

1. Create a new component
2. Add some styling inside the component that specifies/modifies the .btn or .modal-dialog selectors
3. Check the styling

Desktop (please complete the following information):
N / A

Smartphone (please complete the following information):
N / A

Solution
Solution would be to only use extend on placeholders, not actual classes.
Search for @extend . in the codebase to see the offenders.