Get rid of CSS nesting

rewiringamerica · Sep 25, 2023 · f6d03a3 · f6d03a3
1 parent 3f20c2e
commit f6d03a3
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 56 deletions.
diff --git a/src/icon-tab-bar.ts b/src/icon-tab-bar.ts
@@ -15,7 +15,7 @@ export const iconTabBarStyles = css`
     margin-bottom: 1.5rem;
   }
 
-  button.icon-tab {
+  .icon-tab {
     /* Override default button styles */
     background-color: transparent;
     font-family: inherit;
@@ -34,25 +34,25 @@ export const iconTabBarStyles = css`
     gap: 0.5rem;
     align-items: center;
     justify-content: center;
-
-    & .caption {
-      color: var(--color-purple-500, #4a00c3);
-      font-size: 1rem;
-      font-weight: 500;
-      line-height: 125%;
-      white-space: nowrap;
-    }
   }
 
-  button.icon-tab--selected {
+  .icon-tab--selected {
     cursor: default;
 
     background: var(--color-purple-500, #4a00c3);
     border-color: var(--color-purple-500, #4a00c3);
+  }
 
-    & .caption {
-      color: white;
-    }
+  .icon-tab__caption {
+    color: var(--color-purple-500, #4a00c3);
+    font-size: 1rem;
+    font-weight: 500;
+    line-height: 125%;
+    white-space: nowrap;
+  }
+
+  .icon-tab__caption--selected {
+    color: white;
   }
 
   .icon-dropdown {
@@ -90,14 +90,17 @@ export const iconTabBarTemplate = (
 ) => {
   const iconTabs = tabs.map(project => {
     const isSelected = project === selectedTab;
-    const selectedClass = isSelected ? 'icon-tab--selected' : '';
+    const classes = (cls: string) =>
+      isSelected ? `${cls} ${cls}--selected` : cls;
     return html`
       <button
-        class="icon-tab ${selectedClass}"
+        class="${classes('icon-tab')}"
         @click=${() => onTabSelected(project)}
       >
         ${PROJECTS[project].icon(isSelected)}
-        <div class="caption">${shortLabel(project)}</div>
+        <div class="${classes('icon-tab__caption')}">
+          ${shortLabel(project)}
+        </div>
       </button>
     `;
   });

diff --git a/src/state-incentive-details.ts b/src/state-incentive-details.ts
@@ -116,10 +116,8 @@ export const stateIncentivesStyles = css`
     }
   }
 
-  .grid-section {
-    & .card {
-      margin: 0;
-    }
+  .grid-section .card {
+    margin: 0;
   }
 
   @media only screen and (max-width: 640px) {

diff --git a/src/utility-selector.ts b/src/utility-selector.ts
@@ -7,36 +7,36 @@ export const utilitySelectorStyles = css`
   .utility-selector {
     display: grid;
     align-items: center;
+  }
 
-    & .map {
-      position: relative;
-      text-align: center;
+  .utility-selector__map {
+    position: relative;
+    text-align: center;
+  }
 
-      & svg {
-        vertical-align: top;
-      }
-    }
+  .utility-selector__map svg {
+    vertical-align: top;
+  }
 
-    & h1 {
-      position: absolute;
-      top: 50%;
-      transform: translate(0, -50%);
+  .utility-selector__title {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
 
-      font-weight: 700;
-      line-height: 125%;
+    font-weight: 700;
+    line-height: 125%;
 
-      text-align: center;
-      font-size: 1.75rem;
-    }
+    text-align: center;
+    font-size: 1.75rem;
+  }
 
-    & .spacer {
-      /* Only relevant on small layout */
-      height: 1.5rem;
-    }
+  .utility-selector__spacer {
+    /* Only relevant on small layout */
+    height: 1.5rem;
+  }
 
-    & .selector {
-      height: min-content;
-    }
+  .utility-selector__selector {
+    height: min-content;
   }
 
   /* Extra small devices: map above selector */
@@ -47,11 +47,11 @@ export const utilitySelectorStyles = css`
       margin-left: 1rem;
       margin-right: 1rem;
       min-width: 200px;
+    }
 
-      & .card {
-        /* Margin is provided by the outer element */
-        margin: 0;
-      }
+    .utility-selector .card {
+      /* Margin is provided by the outer element */
+      margin: 0;
     }
   }
 
@@ -64,11 +64,9 @@ export const utilitySelectorStyles = css`
 
   /* Large: bigger text, left-aligned */
   @media only screen and (min-width: 769px) {
-    .utility-selector {
-      & h1 {
-        text-align: left;
-        font-size: 2.25rem;
-      }
+    .utility-selector__title {
+      text-align: left;
+      font-size: 2.25rem;
     }
   }
 `;
@@ -121,12 +119,14 @@ export const utilitySelectorTemplate = (
   onChange: (utilityId: string) => void,
 ) =>
   html` <div class="utility-selector">
-    <div class="map">
+    <div class="utility-selector__map">
       ${stateInfo.icon()}
-      <h1>Incentives available to you in ${stateInfo.name}</h1>
+      <h1 class="utility-selector__title">
+        Incentives available to you in ${stateInfo.name}
+      </h1>
     </div>
-    <div class="spacer"></div>
-    <div class="card card-content selector">
+    <div class="utility-selector__spacer"></div>
+    <div class="card card-content utility-selector__selector">
       ${utilityFormTemplate(utilityId, utilityOptions, onChange)}
     </div>
   </div>`;