Providing btn stylings as placeholder/silent classes

Created by: saitho

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Placeholders or silent classes(%-prefix) are blocks that contain stylings but are not rendered to CSS if not used by a class.

I propose adding silent classes to all basic button stylings in scss/_buttons.scss, so they can be extended from without bloat.

Example:

.btn, %btn {
   // button stylings here
}

Motivation and context

We use external JavaScripts that embed own HTML structures that do not use Bootstrap.

We then apply the Bootstrap button stylings to the elements via @extend:

.external-component-button {
  @extends .btn;
}

The issue is that extending classes will extend ALL usages of the .btn class, even nested ones. This results in a multitude of selectors that are not even needed (bloated selectors). The solution is extending from a silent class aka placeholder:

.external-component-button {
  @extends %btn;
}

More information on that topic here: https://jdsteinbach.com/sass/use-extend/