@extend still good practice?

[kmarler18]

If I'm using Bootstrap 5.3 is the code below still good practice? Reason I ask is b/c a lot of the discussion I see surrounding @extend appears to be relative to version 4 and in the 5.3 docs the 'Extend' tab is disabled and has a little wrench icon next to it.

/* styles.css */
.custom-class {
  @extend .bg-primary;
  @extend .text-white;
  @extend .p-4;
  @extend .rounded-lg;
}

[julien-deramond]

Hello @kmarler18
I think there's a little confusion here.
On one hand, there's @extend which comes from Sass: https://sass-lang.com/documentation/at-rules/extend/. You can still use it.
On the other hand, in our doc, on the left-hand side, "Extend" (with the tools icons) is just a section that gathers two pages: "Approach" and "Icons". This is where we document the way to extend Bootstrap; it's not related to the @extend.

[kmarler18]

@julien-deramond Ahhhh, I see, thank you. Just to clarify, do you see any issues with Bootstrap being used in the manner below, in conjunction with scss?

@import 'bootstrap/scss/bootstrap';

.custom-class {
  @extend .bg-primary;
  @extend .text-white;
  @extend .p-4;
  @extend .rounded-lg;
}

[julien-deramond]

Not really issues, but it comes with some particularities.
With the following:

.custom-class {
  @extend .bg-primary;
  @extend .text-white;
  @extend .p-4;
}

the generated CSS will be:

.p-4, .custom-class {
  padding: 1.5rem !important;
}

.text-white, .custom-class {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}

.bg-primary, .custom-class {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

So your .custom-class will contains some !important you might not want, depending on the use cases and your objectives with this class.

Instead, you could do something like:

.custom-class {
  background-color: $primary;
  color: $white;
  padding: map-get($spacers, 4);
}

For simple things, I would rather rely as much as possible on Sass or CSS variables, instead of extending utilities. And maybe keeping @extend to extend components' classes or something with a real complex CSS inside.