Providing btn stylings as placeholder/silent classes

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/

[mdo]

I think this is something that’s tabled for discussion in v5—would be too much overhead IMO. I also have decently strong feelings against extend in general, so we’d need to weigh the pros and cons more deeply across all our components.

Closing for now and labelling for v6 to revisit for then.

[ffoodd]

Honestly I don’t know, but AFAIK this hasn’t been requested before—but I didn’t check.

Moving to this would be a tough work. In your case, workarounds exist and the issue is not with Bootstrap but with another script adding markup roughly.

Bootstrap is meant to apply on specific markup, handling other markup is out scope. And I’m really concerned about what could come next, if we try to take such cases into account.