diff --git a/common/common.scss b/common/common.scss
index c76f25f..1816b1c 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -9,22 +9,22 @@
 $item-height: 40px;
 $icon-opacity: 0.7;
 
-.top-menu {
+.d-top-menu {
   background: fallback($Menu_background, $primary);
   width: 100%;
 
-  .menu-content {
+  &__content {
     display: flex;
     align-items: center;
     justify-content: if($Invert_position == "true", flex-end, flex-start);
   }
 
-  .menu-items {
+  &__items {
     display: flex;
     height: $item-height;
   }
 
-  .menu-item {
+  &__item {
     position: relative;
     color: fallback($Menu_item_color, $secondary);
     border: none;
@@ -44,6 +44,7 @@ $icon-opacity: 0.7;
       .d-icon-caret-right {
         transform: rotate(90deg);
       }
+
       .d-header-dropdown {
         display: block;
         top: $item-height;
@@ -70,18 +71,19 @@ $icon-opacity: 0.7;
         }
       }
     }
+  }
 
-    .d-icon-caret-right {
-      margin-left: 0.25em;
-      transition: transform 0.15s ease-in-out;
+  .d-icon-caret-right {
+    //margin-left: 0.25em; //ideally, this kind of tiny tweaks can be done by utility classes
+    transition: transform 0.15s ease-in-out;
 
-      .rtl & {
-        margin-left: 0em;
-        margin-right: 0.25em;
-      }
+    .rtl & {
+      margin-left: 0em;
+      margin-right: 0.25em;
     }
   }
 
+  //existing components leave as-is
   .d-header-dropdown {
     position: absolute;
     display: none;
@@ -95,7 +97,7 @@ $icon-opacity: 0.7;
     list-style: none;
   }
 
-  .submenu-link {
+  &__submenu-link {
     display: flex;
     align-items: center;
     color: fallback($Submenu_item_color, $primary);
@@ -109,11 +111,12 @@ $icon-opacity: 0.7;
     }
   }
 
-  .divider {
+  &__divider {
     border-top: solid 1px fallback($Divider_color, $primary-low);
     margin: 0.25em auto;
   }
 
+  //special case
   .d-icon {
     opacity: $icon-opacity;
     min-width: 1em;
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index 109e458..ee57d89 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -1,10 +1,15 @@
 $item-height: 40px;
 
 @if $Fixed_mode == "true" {
-  .top-menu {
+  .d-top-menu {
     position: fixed;
     top: 0;
     z-index: z("header") + 1;
+
+    &__item.vmo {
+      //changing vdo classname is out of scope, but would ideally be a modifier so -vmo
+      display: none;
+    }
   }
 
   .d-header-wrap {
@@ -15,9 +20,3 @@ $item-height: 40px;
     padding-top: calc(1.8em + #{$item-height});
   }
 }
-
-.top-menu {
-  .menu-item.vmo {
-    display: none;
-  }
-}
diff --git a/javascripts/discourse/connectors/above-site-header/header-submenus.hbs b/javascripts/discourse/connectors/above-site-header/header-submenus.hbs
index 938eca3..fbfb2f6 100644
--- a/javascripts/discourse/connectors/above-site-header/header-submenus.hbs
+++ b/javascripts/discourse/connectors/above-site-header/header-submenus.hbs
@@ -1,25 +1,33 @@
-<div id='top-menu' class='top-menu'>
-  <div class='menu-content wrap'>
-    <div class="menu-placeholder">
-      <div class="menu-item-container">
-        <div class="menu-items">
+<div id="top-menu" class="d-top-menu">
+  <div class="d-top-menu__content wrap">
+    <div class="d-top-menu__placeholder">
+      <div class="d-top-menu__item-container">
+        <div class="d-top-menu__items">
           {{#each menuItems as |item|}}
-            <a class="menu-item {{item.view}} {{item.className}}" title="{{item.title}}">
+            <a
+              class="d-top-menu__item {{item.view}} {{item.className}}"
+              title="{{item.title}}"
+            >
               {{#if item.icon}}
                 {{d-icon item.icon}}
               {{/if}}
               {{item.text}}
               {{#if showCaret}}
-                {{d-icon "caret-right"}}
+                {{d-icon "caret-right" class="u-ml025"}}
               {{/if}}
               <div class="d-header-dropdown">
                 <ul class="d-dropdown-menu">
                   {{#each item.childItems as |child|}}
                     {{#if child.divider}}
-                      <li class='divider'></li>
+                      <li class="divider"></li>
                     {{else}}
-                      <li class="submenu-item {{child.className}}">
-                        <a target="{{child.target}}" title="{{child.title}}" class="submenu-link" href="{{child.href}}">
+                      <li class="d-top-menu__submenu-item {{child.className}}">
+                        <a
+                          target="{{child.target}}"
+                          title="{{child.title}}"
+                          class="d-top-menu__submenu-link"
+                          href="{{child.href}}"
+                        >
                           {{#if child.icon}}
                             {{d-icon child.icon}}
                           {{/if}}
@@ -36,4 +44,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
index 6b995ba..e7abfaa 100644
--- a/mobile/mobile.scss
+++ b/mobile/mobile.scss
@@ -1,26 +1,27 @@
 $item-height: 40px;
 
-.menu-item-container {
-  overflow-x: scroll;
-  height: 100vh;
-  pointer-events: none;
+.d-top-menu {
+  &__item-container {
+    overflow-x: scroll;
+    height: 100vh;
+    pointer-events: none;
+  }
 
-  .menu-items {
+  &__items {
     display: flex;
     width: 100%;
     height: $item-height;
     pointer-events: auto;
   }
-}
 
-.menu-placeholder {
-  height: $item-height;
-  position: relative;
-  width: 100%;
-}
-
-.top-menu {
-  .menu-item.vdo {
+  &__item.vdo {
+    //changing vdo classname is out of scope, but would ideally be a modifier so -vdo
     display: none;
   }
+
+  &__placeholder {
+    height: $item-height;
+    position: relative;
+    width: 100%;
+  }
 }