Avoid unnecessary spacing-related media queries

[36degrees]

When the $govuk-spacing-responsive-scale map is processed by the _govuk-responsive-spacing mixin, a media query is outputted in the CSS for each breakpoint defined in the map.

(The ‘null’ breakpoint is a special case and is outputted outside of any media query as the ‘baseline’ spacing.)

However, at the lower end of the spacing scale (0-3) there is no difference between the ‘baseline’ spacing and the spacing on tablet and above.

Spacing unit	Small screens	Large screens
0	0	0
1	5px	5px
2	10px	10px
3	15px	15px
4	15px	20px
5	15px	25px
6	20px	30px
7	25px	40px
8	30px	50px
9	40px	60px

With the existing settings, this means that we end up outputting a ‘redundant’ media query targeting the breakpoint which defines spacing that is exactly the same as the baseline spacing. For example:

 .govuk-\!-margin-1 {
     margin: 5px !important
 }

@media (min-width:40.0625em) {
    .govuk-\!-margin-1 {
        margin: 5px !important
    }
}

We can avoid this by simply omitting the tablet breakpoint from the spacing scale where it does not differ from the baseline, and relying on the baseline spacing being applied everywhere:

 .govuk-\!-margin-1 {
     margin: 5px !important
 }

As well as affecting the override classes, this also affects any CSS outputted by the govuk-responsive-margin or govuk-responsive-margin helpers where spacing units 0-3 are passed.

In the rest of the Frontend codebase this includes the:

• Accordion
• Header
• Tabs

diff --git a/dist-main/govuk-frontend-4.2.0.min.css b/dist/govuk-frontend-4.2.0.min.css
index 0e8c0776..97225cfb 100644
--- a/dist-main/govuk-frontend-4.2.0.min.css
+++ b/dist/govuk-frontend-4.2.0.min.css
@@ -1204,8 +1204,7 @@

 @media (min-width:40.0625em) {
     .js-enabled .govuk-accordion__section-content {
-        padding-bottom: 50px;
-        padding-top: 15px
+        padding-bottom: 50px
     }
 }

@@ -4051,12 +4050,6 @@ only screen and (min-resolution:192dpi) {
     padding-right: 50px
 }

-@media (min-width:40.0625em) {
-    .govuk-header__logo {
-        margin-bottom: 10px
-    }
-}
-
 @media (min-width:48.0625em) {
     .govuk-header__logo {
         width: 33.33%;
@@ -5106,7 +5099,6 @@ only screen and (min-resolution:192dpi) {

 @media (min-width:40.0625em) {
     .govuk-tabs {
-        margin-top: 5px;
         margin-bottom: 30px
     }
 }
@@ -5349,15 +5341,7 @@ only screen and (min-resolution:192dpi) {
         border: 1px solid #b1b4b6;
         border-top: 0
     }
-}
-
-@media (min-width:40.0625em) and (min-width:40.0625em) {
-    .js-enabled .govuk-tabs__panel {
-        margin-bottom: 0
-    }
-}

-@media (min-width:40.0625em) {
     .js-enabled .govuk-tabs__panel>:last-child {
         margin-bottom: 0
     }
@@ -6191,202 +6175,82 @@ screen and (forced-colors:active) {
     margin: 0 !important
 }

(Changes to spacing override classes omitted for brevity)

In testing this saves 3,426 bytes (167 gzipped) – 106,896 bytes (13,025 gzipped) compared to 110,322 bytes (13,192 gzipped) for the equivalent ‘dist’ CSS file without these changes applied.

[36degrees]

I updated GOV.UK Publishing Components to use a pre-release with just these changes rebased onto the v4.2.0 tag (39abfcc) and there were no changes according to their visual regression tests either.

[querkmachine]

LGTM