Proposed optimization

Author: castastrophe

elements/pfe-band/src/pfe-band.scss

@@ -2,6 +2,20 @@
 
 $LOCAL: band;
 
+%flex-fallback {
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    margin-bottom: #{pfe-local(gutter--vertical)};
+}
+
+%grid-layout {
+  display: grid;
+  grid-row-gap: #{pfe-local(gutter--vertical)};
+  grid-column-gap: #{pfe-local(gutter--horizontal)};
+  margin-bottom: 0;
+}
+
 :host {
   display: block;
 
@@ -55,9 +69,7 @@ $LOCAL: band;
 
   // Wrapper sets padding and background visuals
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-items: flex-start;
+  @extend %flex-fallback;
 
   // Padding 
   padding: calc(#{pfe-local(Padding--vertical)} / 2)  #{pfe-local(Padding--horizontal)};
@@ -99,45 +111,6 @@ $LOCAL: band;
   --pfe-band--Padding:   calc(#{pfe-local(Padding--vertical)} / 4)  #{pfe-local(Padding--horizontal)};
 }
 
-.pfe-band__header,
-.pfe-band__body,
-.pfe-band__aside,
-.pfe-band__footer {
-    display: flex;
-    flex-flow: column nowrap;
-    align-items: flex-start;
-    margin-bottom: #{pfe-local(gutter--vertical)};
-}
-
-@supports (display: grid) {
-    .pfe-band__header,
-    .pfe-band__body,
-    .pfe-band__aside,
-    .pfe-band__footer {
-        display: grid;
-        grid-row-gap: var(--pfe-band--gutter--vertical);
-        grid-column-gap: var(--pfe-band--gutter--horizontal);
-        margin-bottom: 0;
-    }
-    .pfe-band__header {
-        grid-area: header;
-        grid-template-columns: var(--pfe-band__header--layout);
-    }
-    .pfe-band__footer {
-        grid-area: footer;
-        grid-template-columns: var(--pfe-band__footer--layout);
-    }
-    .pfe-band__aside {
-        grid-area: aside;
-        grid-template-columns: var(--pfe-band__aside--layout);
-    }
-    .pfe-band__body {
-        grid-area: body;
-        grid-template-columns: var(--pfe-band__body--layout);
-        margin-bottom: 0;
-    }
-}
-
 .pfe-band {
   &__container {
     // Does not need to be wrapped in @supports because it updates variables
@@ -227,12 +200,11 @@ $LOCAL: band;
     position:  relative;
     margin:    0 auto;
     width: #{pfe-local(Width)};
-    
+    @extend %flex-fallback;
+
     // Grid support styles
     @supports (display: grid) {
-      display:               grid;
-      grid-row-gap:          #{pfe-local(gutter--vertical)};
-      grid-column-gap:       #{pfe-local(gutter--horizontal)};
+      @extend %grid-layout;
       grid-template-columns: #{pfe-local(layout)};
       grid-template-rows:    max-content;
       grid-template-areas:   var(--pfe-band--gridTemplateArea_mobile);
@@ -241,4 +213,18 @@ $LOCAL: band;
       }
     }
   }
+  // For each section in the band layout
+  @each $section in (header, body, aside, footer) {
+    &__#{$section} { // i.e., pfe-band__header
+      @extend %flex-fallback; // Add the flex fallback styles
+      // Apply the standard grid
+      @supports (display: grid) {
+          @extend %grid-layout;
+          // Apply the section as a named grid-area
+          grid-area: #{$section};
+          // Allow users to hook into the layout with custom columns
+          grid-template-columns: var(--pfe-band__#{$section}--layout);
+      }
+    }
+  }
 }