diff -u b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
--- b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
+++ b/core/modules/system/src/Tests/Cache/PageCacheTagsIntegrationTest.php
@@ -77,8 +77,8 @@
       'block:bartik_login',
       'block:bartik_footer',
       'block:bartik_powered',
-      'block:bartik_mainnavigation_level1',
-      'block:bartik_useraccountmenu_level1',
+      'block:bartik_main_menu',
+      'block:bartik_account_menu',
       'block_plugin:system_main_block',
       'block_plugin:system_menu_block__account',
       'block_plugin:system_menu_block__main',
@@ -108,8 +108,8 @@
       'block:' . $block->id(),
       'block:bartik_footer',
       'block:bartik_powered',
-      'block:bartik_mainnavigation_level1',
-      'block:bartik_useraccountmenu_level1',
+      'block:bartik_main_menu',
+      'block:bartik_account_menu',
       'block_plugin:system_main_block',
       'block_plugin:system_menu_block__account',
       'block_plugin:system_menu_block__main',
diff -u b/core/modules/system/templates/block--system-menu-block.html.twig b/core/modules/system/templates/block--system-menu-block.html.twig
--- b/core/modules/system/templates/block--system-menu-block.html.twig
+++ b/core/modules/system/templates/block--system-menu-block.html.twig
@@ -45,7 +45,7 @@
     'block',
     'block-menu',
     'navigation',
-    'menu-' ~ derivative_plugin_id|clean_class,
+    'menu--' ~ derivative_plugin_id|clean_class,
   ]
 %}
 {% set heading_id = attributes.id ~ '-menu'|clean_id %}
diff -u b/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
--- b/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -8,8 +8,8 @@
 }
 #page,
 #main-wrapper,
-.menu-main .menu li a.active,
-.menu-main .menu li.active-trail a {
+.menu--main .menu li a.active,
+.menu--main .menu li.active-trail a {
   background: #ffffff;
 }
 .tabs ul.primary li a.active {
@@ -54,5 +54,5 @@
 #name-and-slogan a,
 .site-branding-block a,
-.menu-account li a {
+.menu--account li a {
   color: #fffeff;
 }
diff -u b/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
--- b/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -529,19 +529,19 @@
 }
 
 /* --------------- Main Menu ------------ */
-.menu-main {
+.menu--main {
   clear: both;
 }
-.menu-main .menu {
+.menu--main .menu {
   font-size: 0.929em;
   margin: 0 5px;
   padding: 0;
   text-align: left; /* LTR */
 }
-[dir="rtl"] .menu-main .menu {
+[dir="rtl"] .menu--main .menu {
   text-align: right;
 }
-.menu-main .menu li {
+.menu--main .menu li {
   float: none;
   list-style: none;
   margin: 0;
@@ -549,7 +549,7 @@
   height: auto;
   width: 100%;
 }
-.menu-main .menu a {
+.menu--main .menu a {
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
   float: none;
@@ -560,42 +560,42 @@
   margin: 4px 0;
   padding: 0.9em 0 0.9em 10px; /* LTR */
 }
-[dir="rtl"] .menu-main .menu a {
+[dir="rtl"] .menu--main .menu a {
   padding: 0.9em 10px 0.9em 0;
 }
-.menu-main .menu a,
-.menu-main .menu a.active {
+.menu--main .menu a,
+.menu--main .menu a.active {
   color: #333;
 }
-.menu-main .menu a:hover,
-.menu-main .menu a:focus {
+.menu--main .menu a:hover,
+.menu--main .menu a:focus {
   background: #f6f6f2;
   background: rgba(255, 255, 255, 0.95);
 }
-.menu-main .menu a:active {
+.menu--main .menu a:active {
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-.menu-main .menu li a.active {
+.menu--main .menu li a.active {
   border-bottom: none;
 }
 
 /* ---------- Main Menu Toggle ----------- */
 /* Hide the toggle by default. */
 .menu-toggle,
-.menu-main .menu-toggle-target {
+.menu--main .menu-toggle-target {
   display: none;
 }
 /* Unhide it for the main menu. */
-.menu-main .menu-toggle-target {
+.menu--main .menu-toggle-target {
   display: inherit;
   position: fixed;
   top: 0;
 }
-.menu-main .menu-toggle {
+.menu--main .menu-toggle {
   display: none;
 }
-body:not(:target) .menu-main .menu-toggle {
+body:not(:target) .menu--main .menu-toggle {
   color: #333;
   background: #ccc;
   background: rgba(255, 255, 255, 0.7);
@@ -607,7 +607,7 @@
   padding: 0.9em 10px 0.9em 10px;
   z-index: 1000;
 }
-body:not(:target) .menu-main .menu-toggle:after {
+body:not(:target) .menu--main .menu-toggle:after {
   content:"";
   background: url(../../../misc/icons/ffffff/hamburger.svg) no-repeat;
   background-size: contain;
@@ -617,21 +617,21 @@
   position: absolute;
   right: 10px; /* LTR */
 }
-body:not(:target) .menu-main .menu-toggle-target-show:target ~ .menu-toggle,
-body:not(:target) .menu-main .menu-toggle--hide {
+body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu-toggle,
+body:not(:target) .menu--main .menu-toggle--hide {
   display: none;
 }
-body:not(:target) .menu-main .menu-toggle-target-show:target ~ .menu-toggle--hide {
+body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu-toggle--hide {
   display: block;
 }
-[dir="rtl"] .menu-account {
+[dir="rtl"] .menu--account {
   left: 10px;
   right: auto;
 }
-.menu-main .menu .menu-hide a {
+.menu--main .menu .menu-hide a {
   display: none;
 }
-body:not(:target) .menu-main .menu-toggle-target-show:target ~ .menu .menu-hide a {
+body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu .menu-hide a {
   background-color: transparent;
   border: none;
   display: block;
@@ -644,45 +644,45 @@
   text-indent: -999em;
   z-index: 1001;
 }
-body:not(:target) .menu-main .menu li {
+body:not(:target) .menu--main .menu li {
   height: 0;
   overflow: hidden;
 }
-body:not(:target) .menu-main .menu-toggle-target-show:target ~ .menu li {
+body:not(:target) .menu--main .menu-toggle-target-show:target ~ .menu li {
   height: auto;
   overflow: visible;
 }
 
 /* --------------- Secondary Menu ------------ */
-.menu-account {
+.menu--account {
   position: absolute;
   top: 0;
   right: 0; /* LTR */
 }
-[dir="rtl"] .menu-account {
+[dir="rtl"] .menu--account {
   right: inherit;
   left: 0;
 }
-.menu-account .menu {
+.menu--account .menu {
   float: right; /* LTR */
   right: 0; /* LTR */
   font-size: 0.929em;
   margin: 0 10px;
 }
-[dir="rtl"] .menu-account .menu {
+[dir="rtl"] .menu--account .menu {
   float: left;
 }
-.menu-account .menu li {
+.menu--account .menu li {
   margin: 0;
   padding: 0;
     display: inline;
 }
-.menu-account .menu a {
+.menu--account .menu a {
   display: inline-block;
   padding:  0.8em;
 }
-.menu-account .menu a:hover,
-.menu-main a:focus {
+.menu--account .menu a:hover,
+.menu--main a:focus {
   text-decoration: underline;
 }
 
@@ -1896,8 +1896,8 @@
     padding: 0;
     text-align: center;
   }
-  .menu-main .menu li,
-  body:not(:target) .menu-main .menu li {
+  .menu--main .menu li,
+  body:not(:target) .menu--main .menu li {
     float: left; /* LTR */
     margin-right: 5px; /* LTR */
     padding: 0;
@@ -1906,26 +1906,26 @@
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .menu-main .menu li {
+  [dir="rtl"] .menu--main .menu li {
     float: right;
     margin-left: 5px;
     margin-right: 0;
   }
-  .menu-main .menu li:nth-child(3n) {
+  .menu--main .menu li:nth-child(3n) {
     margin-right: -5px; /* LTR */
   }
-  [dir="rtl"] .menu-main .menu li:nth-child(3n) {
+  [dir="rtl"] .menu--main .menu li:nth-child(3n) {
     margin-left: -5px;
     margin-right: 0;
   }
-  .menu-main .menu a {
+  .menu--main .menu a {
     float: none;
     display: block;
     border-radius: 8px;
     margin-bottom: 5px;
     padding: 0.9em 5px;
   }
-  body:not(:target) .menu-main .menu-toggle {
+  body:not(:target) .menu--main .menu-toggle {
     display: none;
   }
 }
@@ -1961,8 +1961,8 @@
     margin: 0;
     padding: 0 15px;
   }
-  .menu-main .menu li,
-  body:not(:target) .menu-main .menu li {
+  .menu--main .menu li,
+  body:not(:target) .menu--main .menu li {
     float: left; /* LTR */
     list-style: none;
     padding: 0 1px;
@@ -1971,26 +1971,26 @@
     height: auto;
     overflow: visible;
   }
-  [dir="rtl"] .menu-main .menu li {
+  [dir="rtl"] .menu--main .menu li {
     float: right;
   }
-  .menu-main .menu a {
+  .menu--main .menu a {
     float: left; /* LTR */
     padding: 0.7em 0.8em;
     margin-bottom: 0;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  [dir="rtl"] .menu-main .menu a {
+  [dir="rtl"] .menu--main .menu a {
     float: right;
     padding: 0.7em 0.8em;
   }
-  .menu-main .menu li a:active,
-  .menu-main .menu li a.active {
+  .menu--main .menu li a:active,
+  .menu--main .menu li a.active {
     background: #f0f0f0;
     background: rgba(240, 240, 240, 1.0);
   }
-  body:not(:target) .menu-main .menu-toggle {
+  body:not(:target) .menu--main .menu-toggle {
     display: none;
   }
 }