diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css
index bc7a3549..9a332575 100644
--- a/src/components/Avatar/Avatar.css
+++ b/src/components/Avatar/Avatar.css
@@ -1,15 +1,12 @@
 @import '../../marketplace.css';
 
 :root {
-  --avatarSize: 40px;
-  --avatarSizeMedium: 60px;
-  --avatarSizeLarge: 96px;
-
-  --bgColorTop: var(--marketplaceColorLight);
-  --bgColorBottom: var(--marketplaceColor);
+  --Avatar_size: 40px;
+  --Avatar_sizeMedium: 60px;
+  --Avatar_sizeLarge: 96px;
 
   /* Base for all avatars */
-  --avatarBase: {
+  --Avatar_base: {
     font-family: 'sofiapro', Helvetica, Arial, sans-serif;
     border-radius: 50%;
 
@@ -19,7 +16,11 @@
     justify-content: center;
 
     /* Colors */
-    background-image: linear-gradient(-180deg, var(--bgColorTop) 0%, var(--bgColorBottom) 100%);
+    background-image: linear-gradient(
+      -180deg,
+      var(--marketplaceColorLight) 0%,
+      var(--marketplaceColor) 100%
+    );
     color: var(--matterColorLight);
 
     &:hover {
@@ -34,11 +35,11 @@
   /* Font is specific to this component, but defining it in marketplace.css makes it easier
    * to change font if brand look-and-feel needs such changes.
    */
-  @apply --avatarBase;
+  @apply --Avatar_base;
 
   /* Layout */
-  width: var(--avatarSize);
-  height: var(--avatarSize);
+  width: var(--Avatar_size);
+  height: var(--Avatar_size);
 }
 
 .initials {
@@ -56,11 +57,11 @@
 /* Medium Avatar */
 
 .mediumAvatar {
-  @apply --avatarBase;
+  @apply --Avatar_base;
 
   /* Fixed dimensions */
-  width: var(--avatarSizeMedium);
-  height: var(--avatarSizeMedium);
+  width: var(--Avatar_sizeMedium);
+  height: var(--Avatar_sizeMedium);
 }
 
 .mediumAvatar .initials {
@@ -72,11 +73,11 @@
 /* Large Avatar */
 
 .largeAvatar {
-  @apply --avatarBase;
+  @apply --Avatar_base;
 
   /* Fixed dimensions */
-  width: var(--avatarSizeLarge);
-  height: var(--avatarSizeLarge);
+  width: var(--Avatar_sizeLarge);
+  height: var(--Avatar_sizeLarge);
 }
 
 .largeAvatar .initials {
diff --git a/src/components/FieldDateInput/DateInput.css b/src/components/FieldDateInput/DateInput.css
index 821521a3..e4e73ef2 100644
--- a/src/components/FieldDateInput/DateInput.css
+++ b/src/components/FieldDateInput/DateInput.css
@@ -1,9 +1,11 @@
 @import '../../marketplace.css';
 
 :root {
-  --selectionHeight: 36px;
-  --hoveredOverlayColor: rgba(255, 255, 255, 0.2);
-  --datepickerDistanceToTop: 252px;
+  --DateInput_selectionHeight: 36px;
+  --DateInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2);
+
+  /* Distance to top */
+  --DateInput_top: 252px;
 }
 
 .inputRoot {
@@ -20,7 +22,7 @@
     /* Similar problem as in issue: https://github.com/airbnb/react-dates/issues/947 */
     top: 36px !important;
     width: 100%;
-    min-height: calc(100vh - var(--datepickerDistanceToTop));
+    min-height: calc(100vh - var(--DateInput_top));
     background-color: var(--marketplaceColor);
 
     @media (--viewportMedium) {
@@ -118,7 +120,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
+    height: var(--DateInput_selectionHeight);
     background-image: url("data:image/svg+xml;utf8,<svg width='14' height='2' viewBox='0 0 14 2' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h14v2H0z' fill='%23FFF' fill-rule='evenodd'/></svg>");
     background-position: center 28px;
   }
@@ -134,15 +136,15 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
-    background-color: var(--hoveredOverlayColor);
+    height: var(--DateInput_selectionHeight);
+    background-color: var(--DateInput_hoveredOverlayColor);
   }
   & :global(.CalendarDay__selected_span .renderedDay) {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
+    height: var(--DateInput_selectionHeight);
     background-color: var(--successColor);
     transition: all 0.2s ease-out;
   }
@@ -156,9 +158,9 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
+    height: var(--DateInput_selectionHeight);
     background-color: var(--successColor);
-    border-radius: calc(var(--selectionHeight) / 2);
+    border-radius: calc(var(--DateInput_selectionHeight) / 2);
   }
   /* Remove default bg-color and use our extra span instead '.renderedDay' */
   & :global(.CalendarDay__after-hovered) {
@@ -169,16 +171,16 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
-    background-color: var(--hoveredOverlayColor);
+    height: var(--DateInput_selectionHeight);
+    background-color: var(--DateInput_hoveredOverlayColor);
   }
   & :global(.CalendarDay:hover .renderedDay) {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
-    background-color: var(--hoveredOverlayColor);
+    height: var(--DateInput_selectionHeight);
+    background-color: var(--DateInput_hoveredOverlayColor);
   }
   /* Remove default bg-color and use our extra span instead '.renderedDay' */
   & :global(.CalendarDay__blocked_out_of_range),
@@ -219,7 +221,7 @@
     /* Similar problem as in issue: https://github.com/airbnb/react-dates/issues/947 */
     top: 34px !important;
     border-top: 2px solid var(--matterColorDark);
-    min-height: calc(100vh - var(--datepickerDistanceToTop) + 2px);
+    min-height: calc(100vh - var(--DateInput_top) + 2px);
 
     @media (--viewportMedium) {
       /* !important is added to top because react-dates uses inline style for height */
diff --git a/src/components/FieldDateRangeInput/DateRangeInput.css b/src/components/FieldDateRangeInput/DateRangeInput.css
index 4549621b..0915fe95 100644
--- a/src/components/FieldDateRangeInput/DateRangeInput.css
+++ b/src/components/FieldDateRangeInput/DateRangeInput.css
@@ -1,9 +1,11 @@
 @import '../../marketplace.css';
 
 :root {
-  --selectionHeight: 36px;
-  --hoveredOverlayColor: rgba(255, 255, 255, 0.2);
-  --datepickerDistanceToTop: 252px;
+  --DateRangeInput_selectionHeight: 36px;
+  --DateRangeInput_hoveredOverlayColor: rgba(255, 255, 255, 0.2);
+
+  /* Distance to top */
+  --DateRangeInput_top: 252px;
 }
 
 .inputRoot {
@@ -20,7 +22,7 @@
     /* Similar problem as in issue: https://github.com/airbnb/react-dates/issues/947 */
     top: 36px !important;
     width: 100%;
-    min-height: calc(100vh - var(--datepickerDistanceToTop));
+    min-height: calc(100vh - var(--DateRangeInput_top));
     background-color: var(--marketplaceColor);
 
     @media (--viewportMedium) {
@@ -113,7 +115,7 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
+    height: var(--DateRangeInput_selectionHeight);
     background-image: url("data:image/svg+xml;utf8,<svg width='14' height='2' viewBox='0 0 14 2' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h14v2H0z' fill='%23FFF' fill-rule='evenodd'/></svg>");
     background-position: center 28px;
   }
@@ -129,15 +131,15 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
-    background-color: var(--hoveredOverlayColor);
+    height: var(--DateRangeInput_selectionHeight);
+    background-color: var(--DateRangeInput_hoveredOverlayColor);
   }
   & :global(.CalendarDay__selected_span .renderedDay) {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
+    height: var(--DateRangeInput_selectionHeight);
     background-color: var(--successColor);
     transition: all 0.2s ease-out;
   }
@@ -151,10 +153,10 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
+    height: var(--DateRangeInput_selectionHeight);
     background-color: var(--successColor);
-    border-top-left-radius: calc(var(--selectionHeight) / 2);
-    border-bottom-left-radius: calc(var(--selectionHeight) / 2);
+    border-top-left-radius: calc(var(--DateRangeInput_selectionHeight) / 2);
+    border-bottom-left-radius: calc(var(--DateRangeInput_selectionHeight) / 2);
   }
   /* Remove default bg-color and use our extra span instead '.renderedDay' */
   & :global(.CalendarDay__after-hovered_start) {
@@ -165,8 +167,8 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
-    background-color: var(--hoveredOverlayColor);
+    height: var(--DateRangeInput_selectionHeight);
+    background-color: var(--DateRangeInput_hoveredOverlayColor);
   }
   /* Remove default bg-color and use our extra span instead '.renderedDay' */
   & :global(.CalendarDay__selected_end) {
@@ -177,18 +179,18 @@
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
+    height: var(--DateRangeInput_selectionHeight);
     background-color: var(--successColor);
-    border-top-right-radius: calc(var(--selectionHeight) / 2);
-    border-bottom-right-radius: calc(var(--selectionHeight) / 2);
+    border-top-right-radius: calc(var(--DateRangeInput_selectionHeight) / 2);
+    border-bottom-right-radius: calc(var(--DateRangeInput_selectionHeight) / 2);
   }
   & :global(.CalendarDay:hover .renderedDay) {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
-    height: var(--selectionHeight);
-    background-color: var(--hoveredOverlayColor);
+    height: var(--DateRangeInput_selectionHeight);
+    background-color: var(--DateRangeInput_hoveredOverlayColor);
   }
   /* Remove default bg-color and use our extra span instead '.renderedDay' */
   & :global(.CalendarDay__blocked_out_of_range),
diff --git a/src/components/ImageCarousel/ImageCarousel.css b/src/components/ImageCarousel/ImageCarousel.css
index 92bafc6b..d678069f 100644
--- a/src/components/ImageCarousel/ImageCarousel.css
+++ b/src/components/ImageCarousel/ImageCarousel.css
@@ -1,9 +1,5 @@
 @import '../../marketplace.css';
 
-:root {
-  --verticalPadding: 100px;
-}
-
 .root {
   position: relative;
   width: 100%;
@@ -11,7 +7,7 @@
   padding: 0;
 
   @media (--viewportMedium) {
-    padding: var(--verticalPadding) 10vw;
+    padding: 100px 10vw;
   }
 }
 
diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
index 91754d97..13c0c1bb 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
@@ -1,10 +1,9 @@
 @import '../../marketplace.css';
 
 :root {
-  --inputHeight: 50px;
-  --sidePadding: 24px;
-  --sidePaddingDesktop: 36px;
-  --poweredImageHeight: 18px;
+  --LocationAutocompleteInput_inputHeight: 50px;
+  --LocationAutocompleteInput_sidePadding: 24px;
+  --LocationAutocompleteInput_sidePaddingDesktop: 36px;
 }
 
 .root {
@@ -35,7 +34,7 @@
 
 .input {
   flex-grow: 1;
-  height: var(--inputHeight);
+  height: var(--LocationAutocompleteInput_inputHeight);
   padding-left: 10px;
   margin: 0;
   line-height: unset;
@@ -61,7 +60,7 @@ size and position, etc.
   position: absolute;
   width: 100%;
   padding-bottom: 72px;
-  top: var(--inputHeight);
+  top: var(--LocationAutocompleteInput_inputHeight);
   left: 0;
   background-color: var(--marketplaceColor);
   border-bottom-left-radius: var(--borderRadius);
@@ -79,13 +78,13 @@ bottom of the container.
   position: absolute;
   bottom: 30px;
   width: 100%;
-  height: var(--poweredImageHeight);
+  height: 18px;
   background-image: url(./images/powered_by_google_on_non_white_hdpi.png);
-  background-size: auto var(--poweredImageHeight);
+  background-size: auto 18px;
   background-position: center;
 
   @media (--viewportMedium) {
-    background-position: center left var(--sidePaddingDesktop);
+    background-position: center left var(--LocationAutocompleteInput_sidePaddingDesktop);
   }
 }
 
@@ -102,11 +101,11 @@ bottom of the container.
     margin: 0; /* Remove the double white space */
 
     /* Assign enough vertical padding to make the element at least 44px high */
-    padding: 9px var(--sidePadding);
+    padding: 9px var(--LocationAutocompleteInput_sidePadding);
 
     @media (--viewportMedium) {
       color: var(--matterColorLightTransparent);
-      padding: 10px var(--sidePaddingDesktop);
+      padding: 10px var(--LocationAutocompleteInput_sidePaddingDesktop);
       margin: 0;
     }
 
diff --git a/src/components/ManageListingCard/ManageListingCard.css b/src/components/ManageListingCard/ManageListingCard.css
index 62c9fd9b..fcdb89d3 100644
--- a/src/components/ManageListingCard/ManageListingCard.css
+++ b/src/components/ManageListingCard/ManageListingCard.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --coverEverything: {
+  --ManageListingCard_coverEverything: {
     position: absolute;
     top: 0;
     right: 0;
@@ -25,12 +25,12 @@
 
 .menuOverlayWrapper {
   /* Positioning */
-  @apply --coverEverything;
+  @apply --ManageListingCard_coverEverything;
 }
 
 .menuOverlay {
   /* Positioning */
-  @apply --coverEverything;
+  @apply --ManageListingCard_coverEverything;
 
   /* Overlay */
   background-color: var(--matterColorAnti);
@@ -41,7 +41,7 @@
 
 .menuOverlayContent {
   /* Positioning */
-  @apply --coverEverything;
+  @apply --ManageListingCard_coverEverything;
   /* Fonts */
   @apply --marketplaceH4FontStyles;
   font-weight: var(--fontWeightSemiBold);
@@ -84,7 +84,7 @@
 
 .rootForImage {
   /* Layout - image will take space defined by aspect ratio wrapper */
-  @apply --coverEverything;
+  @apply --ManageListingCard_coverEverything;
   width: 100%;
   border-radius: 2px;
 }
@@ -287,7 +287,7 @@
 .closedOverlayWrapper,
 .pendingApprovalOverlayWrapper {
   /* Positioning */
-  @apply --coverEverything;
+  @apply --ManageListingCard_coverEverything;
 }
 
 .loadingOverlay,
@@ -295,7 +295,7 @@
 .closedOverlay,
 .pendingApprovalOverlay {
   /* Positioning */
-  @apply --coverEverything;
+  @apply --ManageListingCard_coverEverything;
 
   /* Overlay background style */
   background-color: var(--matterColorLight);
@@ -314,7 +314,7 @@
   color: var(--matterColor);
 
   /* Positioning */
-  @apply --coverEverything;
+  @apply --ManageListingCard_coverEverything;
 
   /* Layout */
   display: flex;
diff --git a/src/components/PropertyGroup/PropertyGroup.css b/src/components/PropertyGroup/PropertyGroup.css
index 340bbd15..8e1fdeed 100644
--- a/src/components/PropertyGroup/PropertyGroup.css
+++ b/src/components/PropertyGroup/PropertyGroup.css
@@ -1,11 +1,11 @@
 @import '../../marketplace.css';
 
 :root {
-  --lineHeight: 24px;
-  --lineThroughTop: calc(var(--lineHeight) - 7px);
-  --lineThroughBottom: calc(var(--lineHeight) - 6px);
-  --lineThroughTopMobile: calc(var(--lineHeight) - 9px);
-  --lineThroughBottomMobile: calc(var(--lineHeight) - 8px);
+  --PropertyGroup_lineHeight: 24px;
+  --PropertyGroup_lineThroughTop: calc(var(--PropertyGroup_lineHeight) - 7px);
+  --PropertyGroup_lineThroughBottom: calc(var(--PropertyGroup_lineHeight) - 6px);
+  --PropertyGroup_lineThroughTopMobile: calc(var(--PropertyGroup_lineHeight) - 9px);
+  --PropertyGroup_lineThroughBottomMobile: calc(var(--PropertyGroup_lineHeight) - 8px);
 }
 
 .root {
@@ -44,7 +44,7 @@
   margin-right: 8px;
 
   /* This follows line-height */
-  height: var(--lineHeight);
+  height: var(--PropertyGroup_lineHeight);
 }
 
 .labelWrapper {
@@ -54,7 +54,7 @@
 .selectedLabel,
 .notSelectedLabel {
   @apply --marketplaceBodyFontStyles;
-  line-height: var(--lineHeight);
+  line-height: var(--PropertyGroup_lineHeight);
   margin: 0;
 }
 
@@ -68,18 +68,18 @@
 
   /* line-through */
   background-image: linear-gradient(
-    transparent var(--lineThroughTopMobile),
-    var(--matterColorNegative) var(--lineThroughTopMobile),
-    var(--matterColorNegative) var(--lineThroughBottomMobile),
-    transparent var(--lineThroughBottomMobile)
+    transparent var(--PropertyGroup_lineThroughTopMobile),
+    var(--matterColorNegative) var(--PropertyGroup_lineThroughTopMobile),
+    var(--matterColorNegative) var(--PropertyGroup_lineThroughBottomMobile),
+    transparent var(--PropertyGroup_lineThroughBottomMobile)
   );
 
   @media (--viewportMedium) {
     background-image: linear-gradient(
-      transparent var(--lineThroughTop),
-      var(--matterColorNegative) var(--lineThroughTop),
-      var(--matterColorNegative) var(--lineThroughBottom),
-      transparent var(--lineThroughBottom)
+      transparent var(--PropertyGroup_lineThroughTop),
+      var(--matterColorNegative) var(--PropertyGroup_lineThroughTop),
+      var(--matterColorNegative) var(--PropertyGroup_lineThroughBottom),
+      transparent var(--PropertyGroup_lineThroughBottom)
     );
   }
 }
diff --git a/src/components/SectionHero/SectionHero.css b/src/components/SectionHero/SectionHero.css
index 81d01087..db8afbfb 100644
--- a/src/components/SectionHero/SectionHero.css
+++ b/src/components/SectionHero/SectionHero.css
@@ -1,9 +1,9 @@
 @import '../../marketplace.css';
 
 :root {
-  --desktopTitleMaxWidth: 625px;
+  --SectionHero_desktopTitleMaxWidth: 625px;
 
-  --animationProperties: {
+  --SectionHero_animation: {
     animation-name: animationTitle;
     animation-duration: 0.5s;
     animation-timing-function: ease-out;
@@ -53,11 +53,11 @@
   @apply --marketplaceHeroTitleFontStyles;
   color: var(--matterColorLight);
 
-  @apply --animationProperties;
+  @apply --SectionHero_animation;
   animation-delay: 0.5s;
 
   @media (--viewportMedium) {
-    max-width: var(--desktopTitleMaxWidth);
+    max-width: var(--SectionHero_desktopTitleMaxWidth);
   }
 }
 
@@ -67,11 +67,11 @@
   color: var(--matterColorLight);
   margin: 0 0 32px 0;
 
-  @apply --animationProperties;
+  @apply --SectionHero_animation;
   animation-delay: 0.65s;
 
   @media (--viewportMedium) {
-    max-width: var(--desktopTitleMaxWidth);
+    max-width: var(--SectionHero_desktopTitleMaxWidth);
     margin: 0 0 63px 0;
   }
 }
@@ -80,7 +80,7 @@
   border-radius: 4px;
   flex-shrink: 0;
 
-  @apply --animationProperties;
+  @apply --SectionHero_animation;
   animation-delay: 0.8s;
 
   @media (--viewportMedium) {
@@ -104,7 +104,7 @@
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 
-  @apply --animationProperties;
+  @apply --SectionHero_animation;
   animation-delay: 0.8s;
 
   @media (--viewportMedium) {
diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css
index ad2e1be2..b51a2b2c 100644
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@@ -1,8 +1,8 @@
 @import '../../marketplace.css';
 
 :root {
-  --linkWidth: 200px;
-  --linkBorderWidth: 4px;
+  --TabNav_linkWidth: 200px;
+  --TabNav_linkBorderWidth: 4px;
 }
 
 .root {
@@ -42,7 +42,7 @@
 
   transition: var(--transitionStyleButton);
   background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='var(--marketplaceColorEncoded)' fill-rule='evenodd'/></svg>");
-  background-position: calc(var(--linkWidth) + var(--linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */
+  background-position: calc(var(--TabNav_linkWidth) + var(--TabNav_linkBorderWidth)) center; /* SelectedLink's width (200px) + border thickness (4px) = 204px */
 
   &:hover {
     text-decoration: none;
@@ -52,7 +52,7 @@
   @media (--viewportLarge) {
     border-bottom-width: 0px;
     margin-bottom: 14px;
-    width: var(--linkWidth);
+    width: var(--TabNav_linkWidth);
 
     /* Remove mobile (horizontally aligned) nav styling */
     padding-top: 0;
@@ -70,7 +70,7 @@
   color: var(--matterColorDark);
 
   @media (--viewportLarge) {
-    width: var(--linkWidth);
+    width: var(--TabNav_linkWidth);
     background-image: url("data:image/svg+xml;utf8,<svg width='4' height='32' viewBox='0 0 4 32' xmlns='http://www.w3.org/2000/svg'><path d='M0 0h4v32H0z' fill='%23000' fill-rule='evenodd'/></svg>");
     background-position: right center;
 
diff --git a/src/components/Topbar/Topbar.css b/src/components/Topbar/Topbar.css
index 649c5a5d..346a19cc 100644
--- a/src/components/Topbar/Topbar.css
+++ b/src/components/Topbar/Topbar.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --logoHeight: 25px;
+  --Topbar_logoHeight: 25px;
 }
 
 .root {
@@ -36,7 +36,7 @@
 
 .home {
   display: flex;
-  padding: calc((var(--topbarHeight) - var(--logoHeight)) / 2) 24px;
+  padding: calc((var(--topbarHeight) - var(--Topbar_logoHeight)) / 2) 24px;
 }
 
 .logoutButton {
diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css
index a52f7db4..baae1854 100644
--- a/src/components/TopbarDesktop/TopbarDesktop.css
+++ b/src/components/TopbarDesktop/TopbarDesktop.css
@@ -5,7 +5,7 @@
   /* This stretches inline element (link) to take available vertical space (big hover area),
    * and align baselines
    */
-  --topbarDesktopLabelStyles: {
+  --TopbarDesktop_label: {
     display: inline-block;
     margin: 24px 0;
     text-decoration: inherit;
@@ -15,7 +15,7 @@
     }
   }
 
-  --linkHoverState: {
+  --TopbarDesktop_linkHover: {
     border-bottom: 0px solid;
     transition: var(--transitionStyleButton);
 
@@ -53,7 +53,7 @@
 
 /* logo */
 .logoLink {
-  @apply --linkHoverState;
+  @apply --TopbarDesktop_linkHover;
   flex-shrink: 0;
   padding: 21px 24px 21px 24px;
   height: 100%;
@@ -84,7 +84,7 @@
 
 .search {
   @apply --marketplaceH4FontStyles;
-  @apply --topbarDesktopLabelStyles;
+  @apply --TopbarDesktop_label;
   color: var(--matterColor);
 }
 
@@ -99,7 +99,7 @@
 
 /* Create listing (CTA for providers) */
 .createListingLink {
-  @apply --linkHoverState;
+  @apply --TopbarDesktop_linkHover;
   @apply --marketplaceH4FontStyles;
 
   flex-shrink: 0;
@@ -120,12 +120,12 @@
 }
 
 .createListing {
-  @apply --topbarDesktopLabelStyles;
+  @apply --TopbarDesktop_label;
 }
 
 /* Inbox */
 .inboxLink {
-  @apply --linkHoverState;
+  @apply --TopbarDesktop_linkHover;
   @apply --marketplaceH4FontStyles;
   height: 100%;
   padding: 0 12px 0 12px;
@@ -144,7 +144,7 @@
 }
 
 .inbox {
-  @apply --topbarDesktopLabelStyles;
+  @apply --TopbarDesktop_label;
   position: relative;
 }
 
@@ -185,7 +185,7 @@
 
 /* Profile menu */
 .profileMenuLabel {
-  @apply --linkHoverState;
+  @apply --TopbarDesktop_linkHover;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -215,7 +215,7 @@
 
 /* Authentication */
 .signupLink {
-  @apply --linkHoverState;
+  @apply --TopbarDesktop_linkHover;
   flex-shrink: 0;
   height: 100%;
   padding: 0 12px 0 12px;
@@ -228,7 +228,7 @@
 }
 
 .loginLink {
-  @apply --linkHoverState;
+  @apply --TopbarDesktop_linkHover;
   flex-shrink: 0;
   height: 100%;
   padding: 0 12px 0 12px;
@@ -243,7 +243,7 @@
 .signup,
 .login {
   @apply --marketplaceH4FontStyles;
-  @apply --topbarDesktopLabelStyles;
+  @apply --TopbarDesktop_label;
 }
 
 /* left animated "border" like hover element */
diff --git a/src/components/TopbarMobileMenu/TopbarMobileMenu.css b/src/components/TopbarMobileMenu/TopbarMobileMenu.css
index 8fd1d847..9aeab113 100644
--- a/src/components/TopbarMobileMenu/TopbarMobileMenu.css
+++ b/src/components/TopbarMobileMenu/TopbarMobileMenu.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --topMarginMobileMenu: 96px;
+  --TopbarMobileMenu_topMargin: 96px;
 }
 
 .root {
@@ -35,7 +35,7 @@
 .avatar {
   /* Layout */
   flex-shrink: 0;
-  margin: var(--topMarginMobileMenu) 0 0 0;
+  margin: var(--TopbarMobileMenu_topMargin) 0 0 0;
 }
 
 .greeting {
@@ -99,7 +99,7 @@
   @apply --marketplaceH1FontStyles;
 
   margin-bottom: 24px;
-  margin-top: var(--topMarginMobileMenu);
+  margin-top: var(--TopbarMobileMenu_topMargin);
 }
 .authenticationLinks {
   white-space: nowrap;
diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css
index a1a6886b..4ddc30e6 100644
--- a/src/containers/CheckoutPage/CheckoutPage.css
+++ b/src/containers/CheckoutPage/CheckoutPage.css
@@ -1,8 +1,8 @@
 @import '../../marketplace.css';
 
 :root {
-  --logoHeight: 25px;
-  --logoHeightDesktop: 27px;
+  --CheckoutPage_logoHeight: 25px;
+  --CheckoutPage_logoHeightDesktop: 27px;
 }
 
 .loading {
@@ -35,10 +35,10 @@
 
 .home {
   display: flex;
-  padding: calc((var(--topbarHeight) - var(--logoHeight)) / 2) 24px;
+  padding: calc((var(--topbarHeight) - var(--CheckoutPage_logoHeight)) / 2) 24px;
 
   @media (--viewportLarge) {
-    padding: calc((var(--topbarHeightDesktop) - var(--logoHeightDesktop)) / 2) 36px;
+    padding: calc((var(--topbarHeightDesktop) - var(--CheckoutPage_logoHeightDesktop)) / 2) 36px;
   }
 }
 
diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.css b/src/containers/ContactDetailsForm/ContactDetailsForm.css
index 5426aab7..f46d82ec 100644
--- a/src/containers/ContactDetailsForm/ContactDetailsForm.css
+++ b/src/containers/ContactDetailsForm/ContactDetailsForm.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --infoTextStyles: {
+  --ContactDetailsForm_infoText: {
     @apply --marketplaceH4FontStyles;
     color: var(--successColor);
 
@@ -56,18 +56,18 @@
 }
 
 .emailVerified {
-  @apply --infoTextStyles;
+  @apply --ContactDetailsForm_infoText;
   background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.52 9.098c-.163.188-.397.3-.646.31h-.032c-.238 0-.466-.094-.635-.263L2.783 6.732c-.353-.35-.354-.92-.003-1.273.35-.353.92-.354 1.272-.004L5.794 7.19l4.59-5.278C9.287.738 7.73 0 6 0 2.686 0 0 2.686 0 6c0 3.313 2.686 6 6 6 3.313 0 6-2.687 6-6 0-.91-.21-1.772-.573-2.545L6.52 9.098z" fill="%232ECC71" fill-rule="evenodd"/></svg>');
 }
 
 .emailUnverified {
-  @apply --infoTextStyles;
+  @apply --ContactDetailsForm_infoText;
   color: var(--matterColorAnti);
   background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.52 9.098c-.163.188-.397.3-.646.31h-.032c-.238 0-.466-.094-.635-.263L2.783 6.732c-.353-.35-.354-.92-.003-1.273.35-.353.92-.354 1.272-.004L5.794 7.19l4.59-5.278C9.287.738 7.73 0 6 0 2.686 0 0 2.686 0 6c0 3.313 2.686 6 6 6 3.313 0 6-2.687 6-6 0-.91-.21-1.772-.573-2.545L6.52 9.098z" fill="%23F00" fill-rule="evenodd"/></svg>');
 }
 
 .pendingEmailUnverified {
-  @apply --infoTextStyles;
+  @apply --ContactDetailsForm_infoText;
   color: var(--failColor);
   width: 100%;
   background-image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><path d="M6.52 9.098c-.163.188-.397.3-.646.31h-.032c-.238 0-.466-.094-.635-.263L2.783 6.732c-.353-.35-.354-.92-.003-1.273.35-.353.92-.354 1.272-.004L5.794 7.19l4.59-5.278C9.287.738 7.73 0 6 0 2.686 0 0 2.686 0 6c0 3.313 2.686 6 6 6 3.313 0 6-2.687 6-6 0-.91-.21-1.772-.573-2.545L6.52 9.098z" fill="%23F00" fill-rule="evenodd"/></svg>');
diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
index 122759b4..3105b7cf 100644
--- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
+++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --formMargins: {
+  --EditListingDescriptionForm_formMargins: {
     margin-bottom: 24px;
 
     @media (--viewportMedium) {
@@ -32,16 +32,16 @@
 }
 
 .title {
-  @apply --formMargins;
+  @apply --EditListingDescriptionForm_formMargins;
 }
 
 .description {
-  @apply --formMargins;
+  @apply --EditListingDescriptionForm_formMargins;
   flex-shrink: 0;
 }
 
 .category {
-  @apply --formMargins;
+  @apply --EditListingDescriptionForm_formMargins;
 }
 
 .submitButton {
diff --git a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css
index 45240cb1..67288901 100644
--- a/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css
+++ b/src/containers/EditListingFeaturesForm/EditListingFeaturesForm.css
@@ -1,15 +1,5 @@
 @import '../../marketplace.css';
 
-:root {
-  --formMargins: {
-    margin-bottom: 24px;
-
-    @media (--viewportMedium) {
-      margin-bottom: 32px;
-    }
-  }
-}
-
 .root {
   /* Expand to available space */
   flex-grow: 1;
@@ -28,7 +18,11 @@
 }
 
 .features {
-  @apply --formMargins;
+  margin-bottom: 24px;
+
+  @media (--viewportMedium) {
+    margin-bottom: 32px;
+  }
 }
 
 .error {
diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.css b/src/containers/EditListingLocationForm/EditListingLocationForm.css
index e53377b9..ac9cd9c9 100644
--- a/src/containers/EditListingLocationForm/EditListingLocationForm.css
+++ b/src/containers/EditListingLocationForm/EditListingLocationForm.css
@@ -1,14 +1,5 @@
 @import '../../marketplace.css';
 
-:root {
-  --formMargins: {
-    margin-bottom: 24px;
-
-    @media (--viewportMedium) {
-      margin-bottom: 32px;
-    }
-  }
-}
 .root {
   /* Dimensions */
   width: 100%;
diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
index 920e8fcb..96b25c4a 100644
--- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
+++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --imageWidthDesktop: calc(50% - 12px);
+  --EditListingPhotosForm_imageWidthDesktop: calc(50% - 12px);
 }
 
 .root {
@@ -22,7 +22,7 @@
   margin: 24px 0 0 0;
 
   @media (--viewportLarge) {
-    width: var(--imageWidthDesktop);
+    width: var(--EditListingPhotosForm_imageWidthDesktop);
     margin: 0 24px 24px 0;
 
     &:nth-child(even) {
@@ -47,7 +47,7 @@
   }
 
   @media (--viewportLarge) {
-    width: var(--imageWidthDesktop);
+    width: var(--EditListingPhotosForm_imageWidthDesktop);
     margin: 0 0 24px 0;
   }
 }
diff --git a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css
index 5ea21027..5d263cc9 100644
--- a/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css
+++ b/src/containers/EditListingPoliciesForm/EditListingPoliciesForm.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --formMargins: {
+  --EditListingPoliciesForm_formMargins: {
     margin-bottom: 24px;
 
     @media (--viewportMedium) {
@@ -28,11 +28,11 @@
 }
 
 .title {
-  @apply --formMargins;
+  @apply --EditListingPoliciesForm_formMargins;
 }
 
 .policy {
-  @apply --formMargins;
+  @apply --EditListingPoliciesForm_formMargins;
   flex-shrink: 0;
 }
 
diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css
index 71bfe610..48e098de 100644
--- a/src/containers/LandingPage/LandingPage.css
+++ b/src/containers/LandingPage/LandingPage.css
@@ -1,9 +1,9 @@
 @import '../../marketplace.css';
 
 :root {
-  --sectionMarginTop: 40px;
-  --sectionMarginTopMedium: 60px;
-  --sectionMarginTopLarge: 94px;
+  --LandingPage_sectionMarginTop: 40px;
+  --LandingPage_sectionMarginTopMedium: 60px;
+  --LandingPage_sectionMarginTopLarge: 94px;
 }
 
 .root {
@@ -72,15 +72,15 @@
 }
 
 .sectionContent {
-  margin: var(--sectionMarginTop) 24px 51px 24px;
+  margin: var(--LandingPage_sectionMarginTop) 24px 51px 24px;
 
   @media (--viewportMedium) {
-    margin: var(--sectionMarginTopMedium) 7.5vw 60px 7.5vw;
+    margin: var(--LandingPage_sectionMarginTopMedium) 7.5vw 60px 7.5vw;
   }
 
   @media (--viewportLarge) {
     max-width: calc(1052px + 36px + 36px);
-    margin: var(--sectionMarginTopLarge) auto 93px auto;
+    margin: var(--LandingPage_sectionMarginTopLarge) auto 93px auto;
     padding: 0 36px 0 36px;
   }
 }
@@ -95,15 +95,15 @@
 
   /* Place the bar on top of .sectionContent top margin */
   position: relative;
-  top: calc(-1 * var(--sectionMarginTop));
+  top: calc(-1 * var(--LandingPage_sectionMarginTop));
 
   @media (--viewportMedium) {
     width: 192px;
     height: 8px;
-    top: calc(-1 * var(--sectionMarginTopMedium));
+    top: calc(-1 * var(--LandingPage_sectionMarginTopMedium));
   }
 
   @media (--viewportLarge) {
-    top: calc(-1 * var(--sectionMarginTopLarge));
+    top: calc(-1 * var(--LandingPage_sectionMarginTopLarge));
   }
 }
diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
index c3f6afd9..c755444b 100644
--- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
+++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
@@ -1,8 +1,8 @@
 @import '../../marketplace.css';
 
 :root {
-  --avatarSize: 96px;
-  --avatarSizeDesktop: 240px;
+  --ProfileSettingsForm_avatarSize: 96px;
+  --ProfileSettingsForm_avatarSizeDesktop: 240px;
 }
 
 .root {
@@ -67,9 +67,9 @@
 }
 
 .label {
-  width: var(--avatarSize);
+  width: var(--ProfileSettingsForm_avatarSize);
   @media (--viewportMedium) {
-    width: var(--avatarSizeDesktop);
+    width: var(--ProfileSettingsForm_avatarSizeDesktop);
   }
 }
 
@@ -77,8 +77,8 @@
 .avatarContainer {
   /* Dimension */
   position: relative;
-  width: var(--avatarSize);
-  height: var(--avatarSize);
+  width: var(--ProfileSettingsForm_avatarSize);
+  height: var(--ProfileSettingsForm_avatarSize);
 
   /* Center content */
   display: flex;
@@ -87,13 +87,13 @@
 
   /* Initial coloring */
   background-color: var(--matterColorBright);
-  border-radius: calc(var(--avatarSize) / 2);
+  border-radius: calc(var(--ProfileSettingsForm_avatarSize) / 2);
   cursor: pointer;
 
   @media (--viewportMedium) {
-    width: var(--avatarSizeDesktop);
-    height: var(--avatarSizeDesktop);
-    border-radius: calc(var(--avatarSizeDesktop) / 2);
+    width: var(--ProfileSettingsForm_avatarSizeDesktop);
+    height: var(--ProfileSettingsForm_avatarSizeDesktop);
+    border-radius: calc(var(--ProfileSettingsForm_avatarSizeDesktop) / 2);
   }
 }
 
@@ -193,13 +193,13 @@
 
 .uploadingImage {
   /* Dimensions */
-  width: var(--avatarSize);
-  height: var(--avatarSize);
+  width: var(--ProfileSettingsForm_avatarSize);
+  height: var(--ProfileSettingsForm_avatarSize);
 
   /* Image fitted to container */
   object-fit: cover;
   background-color: var(--matterColorNegative); /* Loading BG color */
-  border-radius: calc(var(--avatarSize) / 2);
+  border-radius: calc(var(--ProfileSettingsForm_avatarSize) / 2);
   overflow: hidden;
 
   display: block;
@@ -207,9 +207,9 @@
   margin: 0;
 
   @media (--viewportMedium) {
-    width: var(--avatarSizeDesktop);
-    height: var(--avatarSizeDesktop);
-    border-radius: calc(var(--avatarSizeDesktop) / 2);
+    width: var(--ProfileSettingsForm_avatarSizeDesktop);
+    height: var(--ProfileSettingsForm_avatarSizeDesktop);
+    border-radius: calc(var(--ProfileSettingsForm_avatarSizeDesktop) / 2);
   }
 }
 
diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css
index 8c2ec0a2..1c432dea 100644
--- a/src/containers/SearchPage/SearchPage.css
+++ b/src/containers/SearchPage/SearchPage.css
@@ -1,7 +1,7 @@
 @import '../../marketplace.css';
 
 :root {
-  --containerHeight: calc(100vh - var(--topbarHeightDesktop));
+  --SearchPage_containerHeight: calc(100vh - var(--topbarHeightDesktop));
 }
 
 /* Can be given to Topbar when a modal is opened
@@ -29,7 +29,7 @@
   @media (--viewportMedium) {
     position: relative;
     padding-top: var(--topbarHeightDesktop);
-    min-height: var(--containerHeight);
+    min-height: var(--SearchPage_containerHeight);
   }
 }
 
@@ -140,7 +140,7 @@
 
     /* Fixed content needs width relative to viewport */
     width: 50vw;
-    height: var(--containerHeight);
+    height: var(--SearchPage_containerHeight);
   }
 
   @media (--viewportLarge) {
diff --git a/src/containers/TopbarSearchForm/TopbarSearchForm.css b/src/containers/TopbarSearchForm/TopbarSearchForm.css
index e3763ed6..6b1fe30b 100644
--- a/src/containers/TopbarSearchForm/TopbarSearchForm.css
+++ b/src/containers/TopbarSearchForm/TopbarSearchForm.css
@@ -1,10 +1,13 @@
 @import '../../marketplace.css';
 
 :root {
-  --inputHeight: 53px;
-  --topbarMargin: 94px;
-  --bottomBorder: 3px;
-  --mobilePredictionTop: calc(var(--topbarMargin) + var(--inputHeight) - var(--bottomBorder));
+  --TopbarSearchForm_inputHeight: 53px;
+  --TopbarSearchForm_topbarMargin: 94px;
+  --TopbarSearchForm_bottomBorder: 3px;
+  --TopbarSearchForm_mobilePredictionTop: calc(
+    var(--TopbarSearchForm_topbarMargin) + var(--TopbarSearchForm_inputHeight) -
+      var(--TopbarSearchForm_bottomBorder)
+  );
 }
 
 .mobileInputRoot {
@@ -30,7 +33,7 @@
   /* Layout */
   margin: 0 24px 0 0;
   padding: 1px 13px 13px 13px;
-  height: var(--inputHeight);
+  height: var(--TopbarSearchForm_inputHeight);
 
   /* Borders */
   border-bottom-width: var(--borderRadiusMobileSearch);
@@ -78,12 +81,15 @@
 
 .mobilePredictions {
   position: absolute;
-  top: calc(var(--inputHeight) - var(--bottomBorder));
+  top: calc(var(--TopbarSearchForm_inputHeight) - var(--TopbarSearchForm_bottomBorder));
   left: 0;
-  min-height: calc(100vh - var(--mobilePredictionTop));
+  min-height: calc(100vh - var(--TopbarSearchForm_mobilePredictionTop));
 }
 
 .desktopPredictions {
-  margin-top: calc(var(--topbarHeightDesktop) - var(--inputHeight) + var(--bottomBorder));
+  margin-top: calc(
+    var(--topbarHeightDesktop) - var(--TopbarSearchForm_inputHeight) +
+      var(--TopbarSearchForm_bottomBorder)
+  );
   max-width: 434px;
 }