Using box-sizing: inherit in the Universal Selector

[MohamadSalman11]

Currently, box-sizing: border-box; is applied to all elements using the universal selector.

Suggestion:
Set box-sizing: inherit; in the universal selector and box-sizing: border-box; on the root element. This will have the same effect as before but it will ensure child elements inherit their parent's box-sizing, providing consistent behavior.

Example:
Imagine we have a .container with child elements inside it. If we set box-sizing: content-box; on the .container, currently in Bootstrap, only the container itself will have content-box, and the children will have border-box.

For consistency, it would be better if we set box-sizing: inherit; in the universal selector. This way, the child elements would inherit the same box-sizing as their parent. So, if the parent is set to content-box, the children will also use content-box,

Currently

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  @if $font-size-root != null {
    @include font-size(var(--#{$prefix}root-font-size));
  }

  @if $enable-smooth-scroll {
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
}

Maybe Later

*,
*::before,
*::after {
  box-sizing: inherit;
}


:root {
  box-sizing: border-box;

  @if $font-size-root != null {
    @include font-size(var(--#{$prefix}root-font-size));
  }

  @if $enable-smooth-scroll {
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
}

Check out the file