@extend in Sass is almost always an antipattern

a.css

/* ==========================================================================
   COMPILED EXAMPLE
   ========================================================================== */

/**
 * This is one example I picked from the project; there are plenty more like it.
 */



.background-transparent,
.cmp-carousel__action,
.hardware-product--header .selector.selector--with-icon,
.hardware-search .button.button--secondary.hardware-search__load-more:not([class*=section]):hover,
.hardware-search__content__show-item .hardware-search__dropdown__selector-menu__list__item:first-child,
.header-accordion--vertical .icon-circle,
.navigation-list .select-dropdown-section .select-dropdown,
.ngx-slider span.ngx-slider-span.ngx-slider-active:after,
.ngx-slider span.ngx-slider-span.ngx-slider-pointer:after,
.ngx-slider span.ngx-slider-span.ngx-slider-pointer:hover:after,
.row--dtv .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row--dtv .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row--trial-history .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row--trial-history .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row__invoice-overview .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row__invoice-overview .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row__payments-and-refunds .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row__payments-and-refunds .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.sim-activation+.change-plan-footer,
.sim-home-activation+.change-plan-footer,
.Table__invoices .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.Table__invoices .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.Table__topup .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.Table__topup .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.useful-links,
.useful-links.useful-links--quicklinks,
.useful-links.useful-links--quicklinks .useful-links__link:hover {
  background-color: transparent;
}

b.css

/* ==========================================================================
   ADDITIONAL CSS INCURRED VIA @EXTEND
   ========================================================================== */

/**
 * @extend means we repeat each of these selectors AT LEAST twice in the
 * resulting stylesheet. Taking the optimistic view that we do only duplicate
 * each of these selectors, that amounts to this much extra CSS:
 */

.background-transparent,
.cmp-carousel__action,
.cmp-carousel__action,
.hardware-product--header .selector.selector--with-icon,
.hardware-product--header .selector.selector--with-icon,
.hardware-search .button.button--secondary.hardware-search__load-more:not([class*=section]):hover,
.hardware-search .button.button--secondary.hardware-search__load-more:not([class*=section]):hover,
.hardware-search__content__show-item .hardware-search__dropdown__selector-menu__list__item:first-child,
.hardware-search__content__show-item .hardware-search__dropdown__selector-menu__list__item:first-child,
.header-accordion--vertical .icon-circle,
.header-accordion--vertical .icon-circle,
.navigation-list .select-dropdown-section .select-dropdown,
.navigation-list .select-dropdown-section .select-dropdown,
.ngx-slider span.ngx-slider-span.ngx-slider-active:after,
.ngx-slider span.ngx-slider-span.ngx-slider-active:after,
.ngx-slider span.ngx-slider-span.ngx-slider-pointer:after,
.ngx-slider span.ngx-slider-span.ngx-slider-pointer:after,
.ngx-slider span.ngx-slider-span.ngx-slider-pointer:hover:after,
.ngx-slider span.ngx-slider-span.ngx-slider-pointer:hover:after,
.row--dtv .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row--dtv .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row--dtv .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row--dtv .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row--trial-history .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row--trial-history .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row--trial-history .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row--trial-history .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row__invoice-overview .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row__invoice-overview .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row__invoice-overview .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row__invoice-overview .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row__payments-and-refunds .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row__payments-and-refunds .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.row__payments-and-refunds .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.row__payments-and-refunds .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.sim-activation+.change-plan-footer,
.sim-activation+.change-plan-footer,
.sim-home-activation+.change-plan-footer,
.sim-home-activation+.change-plan-footer,
.Table__invoices .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.Table__invoices .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.Table__invoices .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.Table__invoices .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.Table__topup .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.Table__topup .Table--invoice-overview.Table__invoice-payment-refunds .Table--invoice-payments-details tbody,
.Table__topup .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.Table__topup .Table--invoice-overview.Table__invoice-payment-refunds tbody tr,
.useful-links,
.useful-links,
.useful-links.useful-links--quicklinks,
.useful-links.useful-links--quicklinks,
.useful-links.useful-links--quicklinks .useful-links__link:hover,
.useful-links.useful-links--quicklinks .useful-links__link:hover

c.css

/* ==========================================================================
   ADDITIONAL CSS INCURRED VIA NOT USING @EXTEND
   ========================================================================== */

/**
 * If we went the simpler route and just wrote out the declaration each time,
 * we’d only incur the following extra CSS in the resulting stylesheet:
 */


background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;
background-color: transparent;