Bootstrap v6 — Stylelint SCSS Modernization Report

A selector with lower specificity appears after one with higher specificity targeting the same element. The later rule may not override the earlier one as intended, leading to unexpected styling. This is a common source of "why isn't my CSS working?" bugs.

.card-body:not(:first-child) { ... }
.card-body { padding: 1rem; }  /* won't override above */

.card-body { padding: 1rem; }  /* general first */
.card-body:not(:first-child) { ... }  /* specific after */

Modern CSS uses percentage for alpha: rgb(0 0 0 / 50%) instead of the legacy decimal 0.5. More readable and consistent with other CSS percentage values. Stylelint can auto-fix this — run npx stylelint --fix.

rgba(0, 0, 0, 0.5)
color: rgb(255 255 255 / 0.1)

rgb(0 0 0 / 50%)
color: rgb(255 255 255 / 10%)

CSS Selectors Level 4 allows :not(.a, .b) instead of chaining :not(.a):not(.b). More readable and equivalent. Supported in all modern browsers (Chrome 88+, Firefox 84+, Safari 14+). Stylelint can auto-fix this.

:not(.a):not(.b) { ... }
:not(:first-child):not(:last-child) { ... }

:not(.a, .b) { ... }
:not(:first-child, :last-child) { ... }

Modern CSS color functions use space-separated syntax: rgb(255 0 0) instead of rgb(255, 0, 0). The modern syntax also supports the / alpha notation: rgb(0 0 0 / 50%). Stylelint can auto-fix this.

rgb(255, 0, 0)
rgba(0, 0, 0, 0.5)
hsl(120, 100%, 50%)

rgb(255 0 0)
rgb(0 0 0 / 50%)
hsl(120 100% 50%)

Multiple longhand properties (padding-top, padding-right, etc.) can be combined into a single shorthand (padding). Reduces code size and improves readability. Stylelint can auto-fix this.

padding-top: 1rem;
padding-right: 2rem;
padding-bottom: 1rem;
padding-left: 2rem;

padding: 1rem 2rem;

Dart Sass deprecated global functions like adjust-hue(), saturate(), mix(). The modern Sass module system uses @use "sass:color" then namespaced calls like color.adjust(). Bootstrap v6 can adopt this since node-sass is no longer supported. This prevents namespace collisions and makes dependencies explicit.

$color: adjust-hue($primary, 15deg);
$mixed: mix($white, $primary, 80%);

@use "sass:color";
$color: color.adjust($primary, $hue: 15deg);
$mixed: color.mix($white, $primary, 80%);